In this series, I have been going through several techniques web developers can use to improve the performance of their websites.  Previously I discussed using sprite images to reduce HTTP requests during page load.  This article will show several things you can do when you can’t employ the sprite technique.

1. Choose the right file format and compression.

Some images need to be exact (such as icons) and some images can have some imperfections without anyone noticing (such as photographs).  In a photograph, chances are nobody will notice if a pixel’s color is slightly off, however in icons these artifacts will be very noticeable.  When selecting the file image format, we need to take into account which type of image we are dealing with.

JPEG is a lossy image format. This means that due to compression, some of the information of the original image is actually lost when you save the image.  The benefit of a lossy image format is that images can be compressed to very small sizes.  JEPG images have variable quality that can be configured when saving the image. The lower the quality, the better the compression, and the smaller the file.  Usually nobody will notice a quality of 75% or above. Depending on the image though, artifacts will appear in an image with a quality below 75%.

headshot1 headshot2

Example #1 - (left) JPEG image saved at 75% quality - 6.1kb.  (right) JPEG image saved at 10% quality - 1.1kb.

Lossless image formats, such as GIF and PNG, also compress the images but they don’t lose any information.  PNG images will always look pixel-perfect to the original image.  These lossless image formats work best when there are fewer colors, or large blocks of the same color.  This is usually the case with icons, and with these types of images we usually want lossless formats anyway.

So, be wise with your choice of image format.  Think about the type of image before saving. For example, in this website I used a JPEG image for the headshot at the top of the page, but I used PNG for the icons in the sidebar.

For more information:

2. Optimize your images.

Even after you choose the right format and compress the images, many image editors do not completely optimize the saved image.  Several third-party tools exist that will take an image and optimize it.  One such helpful tool is smush.it, provided by Yahoo!.  From their website:
"Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimizes the images without changing their look or visual quality."
Other helpful tools:

3. Use thumbnail images and a zoom extension.

Those familiar with HTML know that the IMG tag lets you specify a height and width attribute.  This can be a convenient and quick way to scale an image without needing to actually modify the original image.

However, this is a terrible, awful, horrible habit.  For starters, the whole original image must be downloaded which is likely a lot larger than is actually needed to display the scaled version. Second, it takes more time because after the image has been downloaded, the browser still needs to scale it dynamically.  Third, web browsers typically do a terrible job at scaling images.

A better way to do this is to create two versions of your images: a thumbnail, and an original. The thumbnail is a scaled version of the original version.  On this blog, I typically use a scaled thumbnail and MooZoom to display the original version when the thumbnail is clicked. By doing this, the images that are displayed on initial page load are smaller, and graphics software can do better scaling anyway.

4. Specify image dimensions in the IMG tag.

Wait, didn’t I just say not to use the height and width attributes of the IMG tag to scale an image?  Yes, you should never do that.  However, it certainly is a good idea to specify the exact image dimensions.  If your icon is 32x32, then set height=32 and width=32.

This doesn’t make the images any smaller, but it makes the website appear to load faster. When the browser is rendering the web page, it downloads all the HTML first, then parses, then downloads all the images.  Between the time it downloads the HTML and the time it displays the images, a blank hole appears where the image should go.  This can be a split second, but it’s noticeable.

Since the browser doesn’t know the size of the image before it is downloaded, it has to guess at the size of the hole.  After the image is downloaded, the rest of the web page appears to jump as the image is rendered in place.  This can be jarring to the user, and makes it very noticeable.  Giving the height and width hint to the browser prevents this jump, and helps the user not notice when your images are displayed.