Preparing your images for the web

It’s become an age old question. “How do I optimize my image files so that they are small and fast loading, but still look great?” Image formats, and image optimization tools have come a long way, but there have always been just a few fundamental concepts at play here. The better you understand these concepts, the easier image optimization gets, and the faster your website loads, and better it looks.

Kinds of image data

The first concept is the identification of the kind of image data you are dealing with.

There are generally two different kinds of image data. The first type of data we can identify is what I’ll call very complex image data. This is the kind of data that comes from a camera. Photographs, paintings, sketches and any other data which are organic in nature have a great variety of tone, color, rich texture, and look like real things.

The second kind of image data we’ll discuss is what I’ll term less complex image data. These kinds of images have strong lines and edges, high contrasts, simplified color palettes, and smooth textures. Cartoons, computer generated images, rasterized vector drawings, technical drawings, icons, and rendered type all fall into this category.

Data compression

Now that we understand the two major types of image data we are dealing with, we should understand why we bother with this differentiation to begin with. The answer lies in data compression.

Data compression is the technique of taking a set of data, and representing it in a way that is smaller than before. If we didn’t do any data compression, we could handle any kind of image in the same way and it would always look great. The problem is image files are very large, and our pages would take forever to load up if there were no compression applied to them.

Since we must apply data compression to images for the web, we need to understand the two major kinds of data compression we’re interested in. There is one kind of compression for each of the two kinds of image data we are dealing with.

Lossy compression

The first is called lossy compression. This kind of data compression works by representing the raw image data in a way that is mathematically analogous to a waveform. Mathematical techniques which simplify that waveform are then applied. The simpler the waveform data are, the smaller they are to store in a computer. In this way images can be compressed to very small fractions of their original size.

The downside of lossy compression is that once the original data are simplified in this way, that complexity is lost forever. There is no way of getting it back. This is why this kind of compression is called lossy. When it comes time to de-compress the data to re-create the image, the image will not look exactly the same as it did before. The more the data are simplified, the smaller the image file gets, and the more different the image looks after de-compression.

This sounds bad, but when applied to the right kind of image, lossy compression is by far the best choice. We apply this kind of data compression to our complex image data. Images with more natural textures and greater complexity are more forgiving of lossy compression because they are so complex, that our eyes have a much harder time detecting the difference between the original and compressed images.

Lossless compression

The second kind of image compression relevant to us is called lossless compression. This kind of data compression works by searching the image for repeating identical sets of data, and reducing them. For example, if an image has a pure white background and large patches of one color, these areas of the image will be identified. These identical repeated sets are then mapped and indexed so that the data are only stored once, thus making the resulting image file smaller than the original data.

The downside of lossless compression is that it cannot compress very complex image data as well as lossy compression can. If we were to compress a photograph using lossless compression, the compressed file would still be relatively large.

The good thing is that when applied to less complex data, Lossless compression yields very small files, and the de-compressed image is exactly the same as the original. This is important with less complex image data because with images of this kind it is much easier for us to notice when there are changes in the data.

Choosing an image format

So now we know that when we are compressing very complex image data, like a photograph, we should use a lossy compression algorithm, and when we are compressing less complex image data, like a line drawing, we should use a lossless compression algorithm. The question remains, what kind of image format should we be using for each.

These days there are three major compressed image formats being used on the web. I’ll explain each of them.

JPEG, which is an acronym for Joint Photographic Expert Group, is an image format which is best used for photographs and other kinds of complex image data. It is the kind of image format used in all digital cameras (unless you are shooting in raw mode, which applies no compression). It will compress your photographs, paintings, and other very complex images down to a reasonable size, and you will hardly notice any difference in the de-compressed image.

PNG, which is as acronym for Portable Network Graphic, is quickly becoming the most common of the lossless image formats used on the web. It should be used for all of your less complex images such as cartoons, computer generated imagery, rendered type, and technical drawings. It will apply enough compression to get your less complex data down to a reasonable size, and the de-compressed image will look exactly the same as the original.

PNG also comes with the added bonus of being able to store alpha channel image data. This allows you to store images with variable transparency.

GIF, which is an acronym for Graphics Interchange Format, is an older lossless image format which is still in common use on the web. While it can compress less complex data reasonably well, it only works with 256 color, or 8bit image data. If your original image contains more than 256 colors, using GIF compression becomes a lossy compression format since it must simplify the color data of the image. For this reason, it’s probably best to never use the GIF image format.

Optimization tips

Now that we understand which image formats we should use for which kinds of images, and understand why, we should be able to create websites with great looking images that load quickly. There are still a few little points which can help us squeeze just a little bit more performance out of our images.

Color palette optimization

The main recurring theme of this post has been simplification of image data. Simplified images compress better, and so become faster to load. With this in mind, it is a good idea to simplify the color pallette of your images as much as possible before compressing.

In the case of very complex image data such as a photograph, there is very little that can be done with regards to palette optimization, with the exception of black and white images. If you are dealing with a black and white image, you may want to convert the image to “greyscale”.

With regards to less complex image data, such as rendered type, palette optimization is almost always possible. Try reducing the color depth of your image from 24bit, or RGB, down to indexed color. Do you notice any image degradation? If not, great! The use of indexed color palettes will dramatically reduce an image’s file size.

Compression level, or “Image Quality”

The level of compression used is most relevant when you are creating JPEG image files. The compression level controls the amount of data simplification that occurs when compressing an image. This setting is usually called “Image Quality” in image manipulation software and is represented as a percentage value. When you compress a JPEG with 100% image quality, a very low compression level is implied, and very little data simplification occurs. When you compress a JPEG with 50% image quality, a very high compression level is implied and a lot of data simplification occurs.

It’s probably best to try and keep your image quality somewhere between 65% and 85%. Below 65% image quality the amount of data degradation starts to become distracting from the image. Anything above 85% image quality generally looks exactly the same to the human eye, and will only result in a larger file size.

Image size

This last point may seem obvious, but it remains a very common error on the web. When creating your final image, make sure you size it to exactly the size you want to display it at on the web. By size, I mean the area the image takes up on the screen, measured in the number of pixels from left to right (the X axis), and the number of pixels from top to bottom (the Y axis).

If you render your final image bigger than the size at which you intend to display it on your website, you are just making a larger file, making your website take longer to load.

Also, forget about DPI, and inches or centimeters when sizing your images for the web. The web is measured in pixels, and the size of a pixel varies from screen to screen, making DPI an irrelevant concept.