Optimizing images for the Web

Optimizing download-speed is perhaps one of the most essential parts of designing a grapic based Website. The use of CSS has enabled Web designers to refrain from using images as often as before. But some websites are still heavily reliant on images for their design, thus the choice of file format and compression becomes very important.

The different image-compression-formats

There are currently four file formats available for the Web, JPEG, JPEG 2000, GIF and PNG. JPEG and GIF are the most common and widely supported image-formats, but are old and the compression-technologies are close to obsolete. PNG is set on replacing GIF, while JPEG 2000 is an improvement of the old JPEG-format.

PNG and GIF both aim at compressing graphics, and is the obvious choice when having to use images to complete a design. Though PNG originated as a response to Unisys decision to enforce their patent on the compression algorithm used in GIFs, it also sports major improvement over GIF. The PNG-format’s compression is lossless, results in lower file sizes, gives a wider range of transparency options, higher color-depth. However, PNGs does not support animation, and it is not as widely supported as GIF. For example Microsoft Internet Explorer (version 6 and lower) is unable to read complex transparency in PNGs. However, the soon-to-be-released version 7 does support it, along with almost every other modern browser. PNG is an international standard, and also the W3C's recommended image-file-format.

JPEG 2000 is still very young, and is currently supported by only a few browsers. It is basically only an improvement of the old JPEG-format, but the improvements are more than welcome. JPEG 2000 allows higher compression before artifacts become visible, often up to 1/20 of the size of the original uncompressed bitmap, the artifacts are also smoother than the squares or mosquito-noise produced by the original JPEG-format. However, as mentioned, the issue with JPEG 2000 is support. Not even Adobe Photoshop nor ImageReady allows images to be exported in JPEG 2000, leaving most designers in the dark.

Settings

Graphics: Assuming that the site being designed is to comply with the W3C's recommendations, and simple common-sense, PNG will be the default graphics-format. The Photoshop-default PNG-8 128 Dither works very well, it uses 8-bit PNG limited to 128 colors chosen selectively and 88% Dither. However, PNG is highly flexible, and depending on the kind of graphic being compressed, as little as two colors may be sufficient. Remember that IE6 and older is unable to read alpha-channels correctly if there is more than one transparancy-color, which is the same as the native limitation in GIF.

Photographs or complex illustrations: The best settings for JPEG seems to be Quality-High, set to in between 60 and 70% and the Progressive option checked. The same applies for JPEG 2000 if you want, and are able, to use that - the only difference is that you can use a higher level of compression. - But keep in mind that few browsers are able to read JPEG 2000, so it may be an idea to wait a while before utilizing the new standard.

As always the term crap-in/crap-out applies. Use high-resolution source-files that look good, increase sharpness and contrast on photos intended to be output as low-res files, and when scaling down photographs use bicubic-sharper resampling. Make sure that the images are color-managed and optimized to have close-to-correct colors on even poor displays. The sRGB-ICC-profile is the most common, chose to attach the ICC-profile if the output-format allows it (but only if your entire image-workflow is color-managed, otherwise it is pointless.)