Every resource you add to your page is an extra request to the server and extra network trip for the browser before it declares the page complete. Network requests are typically the slowest components of a page load. This is especially obvious on mobile devices when surfing websites on 3G or even lower connections. The smaller your files are, the faster they will reach the browser.
If you can avoid using a large image, you are better off not using them.
If you are considering using a GIF format for your images, always use PNG. PNG formats for images are far less heavy and much smaller. Even further, 8-bit PNGs are significantly smaller in size.
If you are using PNGs, you should use PNG-8 with a full alpha channel that gives you compatibility all the way back to IE6. Ensure you verify the final output to ensure they are not too grainy or pixelated.
There are build tools in HTML5 Boilerplate that will optimize images,which we will look into in the next chapter. There are also standalone tools that are worth looking at, when you want to compress a bunch of images in one go. If you wish to upload your images and optimize them, you can do so at smushit.com/ysmush.it/.
If you have 24-bit PNG images, you can convert them into 8-bit PNGs that have a full alpha channel with this tool that you can download from pngmini.com. It is only for Mac OS X.
GUIs and command-line tools that work on other Operating Systems are outlined at pngquant.org.
If you would like to optimize images of various formats in one go, ImageOptim would be your best tool of choice. You can download this from imageoptim.com. This is also for Mac OS X only, and takes advantage of several tools to perform these optimizations.
If you would like to use something similar on other systems, you can download the specific tool you need for each image format. The following table lists tools for some of the popular image formats:
|
Format |
Tool |
|---|---|
|
| |
|
| |
|
|
If you would like to learn more about using these tools for optimization, read more on the slides by Stoyan Stefanov about image optimization for the Web at www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation. There are even more clever optimizations that could be done for PNG and JPEG image formats, detailed over on Smashing Magazine at www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/ and http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/ respectively.
Network requests take a long time to make for each resource. To make these smaller, you could combine multiple image files into one single image file that needs to be requested once and be cached for a very long time so that the page loads significantly faster. This is especially useful if your page is going to be viewed on devices with very low bandwidth connections to the Internet.
This means, you combine multiple images in one large image and use the CSS background property on all selectors where these images would be used. Let us convert all our artist images into a big sprite and replace the image elements into background images.
The following is our final sprite:
Let us replace our image elements in index.html, like the following one:
<img width="100" height="100" class="t-media__aside t-image--artist" src="img/artist-tinariwen.png">
With the following:
<i class="t-artist__image artist-tinariwen"></i>
We do this for each of the artists. Then, in our style.css, we add the following code snippet:
.t-artist__image {
background: url(../img/artists-image.png) top left no-repeat,
url(../img/bg-artist.png) no-repeat center center;
float: left;
display: block;
}
.artist-asa { background-position: -0px -0px, 0 0; }
.artist-kidjo { background-position: -0px -100px, 0 0; }
.artist-kuti { background-position: -100px -0px, 0 0; }
.artist-sangre { background-position: -100px -100px, 0 0; }
.artist-tinariwen { background-position: -200px -0px, 0 0; }
.artist-toure { background-position: -200px -100px, 0 0; }Nothing has changed in the final page, except we have now reduced the number of network requests to 1 instead of 6 for these images. By optimizing the final sprite, we can make this request even faster.
Generating a sprite would seem like a lot of work, but there are many tools to help with this.
Using the instructions documented at arnaumarch.com/en/sprites.html, you can use a script file from Photoshop to select a folder of images and also generate the associated CSS file using images within these files positioned and corrected as a background image.
There are some things to note when using this tool, as explained in the following points:
- Make sure the folder only contains the images you want to add to a sprite
- The resulting CSS file is generated within the folder used to create the sprite
- The generated sprite is opened in Adobe Photoshop and you are required to crop it before you save it out as an image at the location of your choice
Compass—the framework on top of Sass—can stitch your images together at compile time and have the images referenced in your Sass file, turned into a sprite in the resulting CSS file.
All you need to do is to make sure you set up a folder within your images folder, such that you have the right names for each of the images, as described in the following list (taken from Compass documentation):
images/my-icons/new.pngimages/my-icons/edit.pngimages/my-icons/save.pngimages/my-icons/delete.png
The name my-icons can be any name you prefer. Then in the Sass file, use the following code:
@import "my-icons/*.png"; @include all-my-icons-sprites;
Use the same name you used instead of my-icons in the previous step. Presto! You are done! Compass generates a CSS file that has the following code:
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }Now, use the appropriate class name in your markup to add the appropriate image to your element.