Website optimization is an important aspect of a web developers life, as website speed is a determining factor if visitors will stay. In this tutorial, we will look to one small aspect of website optimization, namely the use of image sprites. This will be done with the example of social media icons in svg, which we will render retina compatible with a .png fallback for IE8.
What is an image sprite?
Image sprites combine reusable images into one single image, thereby reducing the amount of http requests that have to be made. Using CSS and elements with a fixed height and width, you only show a part of the image. And this is beneficial to your websites loading speed. And do you know? Website loading speed is often appreciated by search engines.
So how does this exactly work? Image you have an ‘a’ html element with a 55 by 60 height and width. You also have an image with multiple icons next to each other, which are all about 55 by 55 px. The total image is however much larger than 55 x 55px. If you need set this image as a background for this anchor element, it will be automatically be positioned from it’s left top corner. Because the total image is larger, only a portion of this image will be shown. This is illustrated by the example below, in which the anchor element is outlined red.
And that is where the usefulness of images sprites becomes apparent. By moving either the x or y position of the image, another part of the image becomes visible, and hence you can utilize all the icons in the image sprite. For example, if we move the background in negative x direction (which can be done by the CSS background-position attribute), another icon becomes visible:
But enough talk, let’s start the tutorial! For this tutorial, you need any vector editor program capable of opening .ai (most likely Adobe Illustrator) and a text editor of your preference.
Step 1: Grabbing the Sprite Image
The first step is to actually get a set of social icons. While you can choose any social icons you want or even design them your self, I will use a specific set from the internet as an illustrative example. This are the Polygon Social Media Icons from Lunar Pixel, which can be downloaded from here. I adjusted this pack somewhat to be useable on the web, so you can also skip the following steps and download the svg and png directly.
Now if you download this file and open it up in Adobe Illustrator, you will see that is has descriptions and a background around.
- The first thing to do would be to remove this layer using the Layers Panel (F7).
- Additionally, I scaled all of the icons by 50%, as they where fairy large. I did this by selecting all the icons in my Artboard, and choosing Object > Transform > Scale, using a setting of 50% uniform scale. These options can be found in the header menu.
- Following, I scaled down the Artboard to the size of the icons, using the Artboard Tool (Shift + O).
- I also moved each of the icons closer to each other and removed their drop shadows, to reduce the image size.
- As we are using this set for web, you can also change the color mode to RGB by going to File > Document Color Mode > RGB Color
- Finally, save the file as .svg (using File > Save as) and .png (using File > Save for Web).
For me, this resulted in the following image:
Because we are using SVG, we have an image file that can scale infinitely, and always be sharp. Hence, these icons will also render beautifully on retina displays. There is one caveat in using SVG: it is not support by IE8. For this, we will be using the .png fallback. You can also download the .svg and .png directly.
Step 2: Setting up the HTML
The HTML is pretty straightforward. I will use a simple list, and for this tutorial example I will use the first row of the image sprite to illustrate the functioning of CSS image sprites. I left the links empty, but of course you can swap this for any link of your preference.
As you can see, I linked to the css file in the assets/css/ folder. Both sprite images I placed in the assets/img/ folder.
Step 3: Lay it out with CSS
As the html structured is defined, we are able to style! Below is the final stylesheet, and I will walk through it step by step:
- The default unstyled list was reset
- The list items were styled inline block, so they are located next to each other. This automatically gives a small distance between the icons.
- The background was defined at the anchor level. As you can see, there is a little trick to let IE8 load the .png fallback, as it does not support multiple backgrounds.
- The anchor element was defined at block display with a fixed height and width matching the icon size, so we are sure these fit into our anchor ‘canvas’.
- Additionally, transitioning was added for a better user experience on hover.
- Now you can see that for each social class, the background was moved a little in x direction. In this way, the position is altered for each class. Because background-position was not defined under .social-media-icons a, the value defined at each social network class is used.
In this illustrative example I have only used the first row of icons. By changing the y value in background position, we can also harness each other row in the image sprite.
This was it, I hope you got a good understanding of image sprites. Any questions? Feel free to comment below. The complete files are available on github as well.