Image Sprites VS Web Icon Fonts

There are a bunch of ways to increase the performance of your website. Many today are using image sprites and/or icon fonts. They help add a visual flair to your website, but also help decrease load times. This is all great, but you shouldn’t just jump into using either of these solutions without first knowing what their advantages and disadvantages are.

Image Sprites

Recent sprite I worked on from footaction.com

Image sprites let you pack a large number of complex images into one. They can be any color , shape or size, just like the one from Google above.

Advantages

Probably the biggest advantage when using an image sprite is the complexity of the images that you can include. This is where they have a clear advantage over an icon font, as icon fonts are very simple and can only be a single color. Image sprites are just a large collection of individual images, so it doesn’t matter what you put onto them.
An image sprite can also fit as many images as you want. If you wanted, there could be hundreds on one sprite, but I would not recommend that. If you need over 50 images on a sprite you should probably reconsider your design or try to solve some of your problems with HTML and CSS.
Lastly, and this applies to both image sprites and icon fonts, is that sprites reduce the number of HTTP requests required on your web page. Hopefully we all know that less of them will help increase the load time of your website. Fast websites = happy users (unless you have a crappy website :/).
So here is a list of advantages that I came up with for image sprites:

• Complex shapes and multiple colors
• Fit a large amount of images
• Less HTTP requests
• Cross browser compatible

Disadvantages

With any solution there are a few disadvantages. Image sprites can be larger in size, since they are usually a png, but not by much. You will have to wait a little longer for the sprite to load, which causes a slightly noticeable gap in time before you see them load in fully. This is definitely offset by the savings in load times though and should not be worried about. If you are still worried, you could try hiding your page until the images are loaded.
If you are creating image sprites by hand they are a pain to change. If you make a simple change to the height of one of the images in your sprite, you will have to go in and replace that image, possibly reorganize your sprite, and then possibly add and change your CSS. This can be quite time-consuming if your images change rapidly or you are stuck with an indecisive designer. All of this can be avoided by using tools that generate sprites for you such as Grunt.
Image sprites can add a little to your CSS as well. This is a necessary evil, but has to be done because otherwise we couldn’t position our sprites correctly! I have had some larger sprites add up to 100 lines of CSS, but this is usually minor since raw text is always lighter than an image. The best solution I have come up with is to have one class apply the background-image, and then another class apply the background-position.

CSS

.sprite { background: url(pathtoimage/sprite.png) no-repeat; } .image-1 { background-position: -120px 0; width: 40px; height: 40px; } .image-2 { background-position: -120px -40px; width: 40px; height: 40px; }

1 2 3 4 5 6 7 8 9 10 11

.sprite { background: url(pathtoimage/sprite.png) no-repeat; } .image-1 { background-position: -120px 0; width: 40px; height: 40px; } .image-2 { background-position: -120px -40px; width: 40px; height: 40px; }

<span class="sprite image-1"></span>

1	<span class="sprite image-1"></span>

Here is my complete list of disadvantages:

• Slightly larger in size
• Hard to change (if done manually)
• Not responsive
• Cannot tile

Web Icon Fonts

Here is a screenshot from Icomoon

Icon fonts are a wonderful addition to the tool-set of web developers. Below are some distinct advantages and disadvantages of them.

Advantages

Web icon fonts are very small in size compared to images. They are like any other font file, just a pack of vectors. Smaller is always better when trying to improve the performance of your site.
Since icon fonts are just that, fonts, you can change the color with a few lines of CSS. It is quite pleasing to be able to control an icon just like a font. Hover effects with CSS are a breeze. If you are looking for a nicer effect you could even add text-shadow.

CSS

@font-face { font-family: 'iconfont'; src:url('fonts/iconfont.eot'); src:url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('fonts/iconfont.woff') format('woff'), url('fonts/iconfont.ttf') format('truetype'), url('fonts/iconfont.svg#tetzlaff') format('svg'); font-weight: normal; font-style: normal; }

1 2 3 4 5 6 7 8 9 10

@font-face { font-family: 'iconfont'; src:url('fonts/iconfont.eot'); src:url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('fonts/iconfont.woff') format('woff'), url('fonts/iconfont.ttf') format('truetype'), url('fonts/iconfont.svg#tetzlaff') format('svg'); font-weight: normal; font-style: normal; }

There is no need to worry about web fonts being cross browser compatible. If you have the proper file formats (eot, ttf, woff, and svg) you use them just like any other font with @font-face. If you don’t have all the formats needed, head over to Font-Squirrels font-face generator.
One of the greatest advantages of icon fonts is that they won’t get pixelized on a retina screen. Vectors don’t really care what screen they are on and will look great on any. On high res phones they look especially appetizing.
Check out two of my favorite icon font generators:

• http://fontello.com/
  
• http://icomoon.io/app/
• http://fontastic.me/app/

Here is my list of advantages:

• Small in size
• Pixel density independent
• Easily change size and color
• Less HTTP requests
• Cross browser compatible

Disadvantages

Since icon fonts are just simple vectors, they cannot be very complex. This is why they are used primarily for icons and that is it. If you want multiple colors, effects and gradients, it is best to stick with images.
Here is my complete list of disadvantages:

• Cannot be very complex, mostly used for icons
• Only a single color
• Accessibility (via Eduardo)

Which to choose?

Choosing which of these to use depends upon the situation you are in. If you want highly detailed images, and not just simple icons, then you better create an image sprite. Otherwise for simple icons, a web icon font has a lot of distinct advantages. They are especially useful for mobile devices where icons play a much larger role in most designs. Sometimes the best solution is not just to choose one, but to integrate both into your website.

If this post interested you, check out my other one on increasing the performance of your website. Let me know if this post helped you in the comments below.