You might have wondered why we can’t just settle on one file format to store images in and be done with it. The problem with that is that we all want two things in an image format: we want perfect image preservation, and we want them to load instantly. It turns out, computers being the beasts that they are, that these two goals are incompatible with each other! Add to this the jungle of corporations patenting their image technology, and you have the soupy mess we have today.
Image formats get their speed by compression, where a code to make the image data take up less space in memory is used. The higher the compression, the faster it loads, and the worse the image quality gets. So, from (roughly) fastest to best quality:
JPEG – The most common format used on the Internet today. It is the fastest loading, and it uses “lossy” compression. It takes up the least file space, up to 1/20th of the uncompressed file size! But images saved in JPEG format tend to get blurry and speckled over time, as the image file loses color information. this especially after it’s been saved and downloaded several times.
GIF – While GIFs do use a lossless compression method, they pay a price for it by being limited to a small color index per image. Thus, saving an image from another format into GIF presents it’s own challenges, as the colors will be translated into the new format’s color index, and possibly changed. The main benefit to GIFs is that they have frame animation built in and can have transparent parts.
PNG – The highest-quality image format seen on the web – and consequently the slowest to load and the biggest memory footprint. The good news is that now that Microsoft has released Internet explorer 7, all web browsers at least fully support PNGs. PNGs are crystal-clear in quality, and can support transparency, but they do not allow frame animation.
The original PNG.
A JPEG version of the image, saved a few times.
An indexed GIF version of the image.
Last of all to mention is SVG. SVG is the scalable vector graphics standard, and it is certainly the wave of the future. But as far as the web browser is concerned, the future is very far off. Almost no web browsers can directly display SVG, and it is extremely slow besides. But it is superior in many ways, since it represents image elements as scriptable objects rendered directly in the image browser, unlike the three former examples which are raster graphics.
There are many more image formats, but they don’t matter much to the web beyond file transferring. For web page display, your best options are: JPEG for photographs and very large (desktop-wallpaper-sized) files. Never save an image you intend to edit in JPEG. GIFs are good for simple web graphics (such as banners and buttons) because you can have them in a shape besides ‘square’, and also animations. PNGs are needed only when sharp quality is crucial, and are necessary for long-term storage of an image you intend to edit.
- Online Graphics Tools – part 1
- ZIP ZOO – File Compression Formats You’re Likely to Meet
- This Is What We Mean When We Say Bad Design
- Free Software Graphics Programs That Aren’t Gimp
- Online Graphics Tools – part 2