Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating a custom URL in WordPress
- Adding breadcrumb links to sites
- Creating a toggle button with jQuery
- Adding Twitter feeds to a site
- Adding PayPal buttons to pages
- Uploading photos to your web site
- Embedding videos for different browsers and devices
- Parsing and placing a YouTube video feed
Skill Level Intermediate
Hey there! This is Ray Villalobos and welcome to View Source! In this episode I want to show you how to add images directly into your CSS files as data. If you want to know why that's important, then it's time to View Source. If you have a large web site, most of the communication between the server and the users are calls to images. Every time you request even the smallest image, you're creating an extra connection that has to be processed by your server. You can reduce the amount and frequency of those requests by embedding your images into your CSS documents.
A good example will be for small icons. If you use the icon many times on a busy web site, it can add thousands of calls as many users navigate through the site. When you combine this technique with CSS Sprites, which creates one image that gets loaded on many times but shows different parts of the image for different elements, then the time savings can be substantial. So let's take a look at how we can do that. I have a simple HTML document here that just has a list with a couple of sub-lists. First thing I need to do is I need to create some styles to make this look a little better.
So I am going to go into codesnippets and grab a little bit of style sheet code, so I am going to click right there and paste that in there, and what that's doing is creating the list, getting rid of the item numbers that an ordered list would normally add, plus adding this background URL of arrows.png. That file is right here and is a sprite. So you could see there are two different versions of this image and they're both in the same file. What we could do is, show the normal version of this image by default and then switch to the arrow down version whenever we process one of the clicks on these elements.
So let's go back to our style sheet and take a look at some of the other stuff that we've got here. We've also created a style called showme, for after we click on one of these elements, so that it can show the sub-lists. Finally, we have hidden all the secondary lists by setting the second ordered list elements to have no backgrounds and no display elements. To display a background of none so that when I expand these items all these sub items won't have arrows also, and I've also set the display to none, so that they currently are not showing.
So I am going to grab this version of the script, it just says whenever the DOM is finished loading, if you click on one of these list items I am going to take one of those list items and make them display. So I am going to copy that, bring it into my index.html and right underneath my call to jQuery, I am going to paste that in here. And now, if I click on one of these items, it shows the secondary list. So the arrow graphic after we click on one of the main lists is supposed to be moving to its second position which shows the down arrow, but right now because we expanded the list, it's still showing the first position.
So that's generally how sprites work. They just shift the graphic to another position, saving you a little bit of time because the graphic is loading only one time. We can save a little bit more time by just embedding the graphic into the CSS file. That way instead of loading one CSS file and one graphic, it's only going to load the CSS file and the image will already be embedded into it. So what we need to do is take that graphic and convert it into a URL data format that is just a string that we can paste into our CSS and have it read all the data for the image from the same file.
So to do that you can go to this web site and click on this Browse link to load up your image. Find the image that you want to convert, and hit Choose button here. Then click on Convert Image. It will take you to a secondary page in which you can see different versions of this image that you can load up on your web site. So as you can see you can load it up as just a regular image, using an image tag, or you can load it up as a background image, or you can get the raw data right here. So I've already done that and placed it into my CSS, so I am going to switch back over here, grab the next version from codesnippets of the list item.
I am going to copy this, go back into mystyle.css and change this version of the list item, paste it with the new data. One of the things you have to watch out when you paste the code and it looks like it happened here when I was doing this, is that the code that you get from this web site doesn't have the no- repeat option on the background image. The code here for the background image has the background-repeat as a separate element. Since we are using that on a regular document, we need to make sure that we delete this extra semicolon here that this data comes with, and now our arrows will not repeat.
This file now is no longer using the image from our project files; it's using the image from this data in this background. And although that looks like it's a really long bunch of data, because these things get cached by your browser, this will make your site run a little faster. I wouldn't recommend this for any humongous photos, but definitely if you're using a lot of small interface elements, combine them all into one image, use CSS sprites and then embed it into your CSS, and you should see a dramatic boost in performance.
So see you next time and remember that if you are looking for ways to speed up your life, don't forget to View Source.