Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the easiest ways to help speed up your web sites, especially when it comes to images rendering on the web site, is to utilize a technique know as image sprites. And in most cases we are going to talking about these in terms of CSS, but they have to be created somewhere, and so Adobe Illustrator is actually really good for creating these things called image sprites. But first let's talk a look at what exactly an image sprite is. I have inside of this document two layers, one of which is called window. And the window layer is simply a compound shape that has a 48 x 48 pixel wide opening in the middle of it.
And underneath that, on layer 2, you'll see there are several social icons. If I hide the Window layer, you can actually see all of the icons right there. So I am going to temporarily leave the Window layer hidden and just work on layer 2 for now. You can see here I have all of these different icons as one single group. And that's basically what an image sprite is. It's a group of images that are laid out in a grid format that are easily displayed via CSS in different ways and in different positions throughout your web site. So for instance, if I wanted to display the Facebook icon as opposed to the Twitter icon through CSS, basically what I would do, I would set the window to be 48 x 48 pixels, just like this, and then I would simply move the group so that the Facebook icon is now present in the windows.
Now the Facebook icon is the only one you see. The added benefit here is that all of the rest of the images are actually rendered in the background, so anytime you call upon those images to be displayed, the load time is significantly reduced because those images have already been rendered. So all they have to do is just pop into place. So if I needed to get the Skype icon in the right place, just maneuver it through CSS. It pops up in the window, instead of the Facebook icon. So what you are able to do is take multiple images, lay them out in a grid, and then call them out based on their position in the grid to be displayed in different areas of your web site.
Again, this is mainly for speed and convenience factor so that you don't have a whole bunch of images in your images directory and you don't have to worry about loading individual images across your site. So if you do a Google search for "Image Sprite" or even a specific one, like say "Facebook Image Sprite," you'll see how this has being employed on hundreds of web sites around the world. And it's a really great technique for helping you speed up the load time of your site and also for the convenience factor. The big thing here that you have to remember is setting these up inside of a grid, making sure that they are evenly spaced, and knowing the overall location of each individual icon so that when you toss this over the wall to a developer they can easily use round numbers for the positioning and it makes it a whole lot easier when they are calculating the CSS.
So again a CSS image sprite, or an image sprite in this case, is nothing more than big grid full of images that you are going to use to display in different areas through these little windows of which you define the size, shape, and location.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43471 Viewers
119 Video lessons · 54635 Viewers
65 Video lessons · 14818 Viewers
113 Video lessons · 83015 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.