Choosing the right format

In general we recommend that GIF files are used for graphical elements such as buttons, graphical text, line art etc. The compression of these relatively small images is sufficient and the quality will not be compromised.

For photographic images and graphics that have gradients we recommend JPEG compression, since much of superfluous information can be discarded and the images compressed to a small file size. It is important to select the quality factor for JPEG at the time of export and to find a good balance between quality and file size.

The PNG format has many advantages, but for the cause of backward compatibility it is safer to use GIF files. Some older browsers don't display PNG files or need plug-ins to display them.

Let's look at an example of a simple button:

GIF	JPEG	PNG
1.63 KB 68 colors	3.20 KB 80 % Quality	1.40 KB 68 colors

You can see that the JPEG file looks a lot more uneven and is almost twice as large as the GIF or the PNG file.

Here's a good example to show the strength of JPEG for images that have gradients:

GIF

2.75 KB, 37 Web safe colors

JPEG

1.03 KB, 80 % Quality

We notice right away that the GIF image is banded and the continuous tone changes split up. This is partly because I exported into a web safe format, which only has 37 colors in the red tones available.

I could export to the maximum of the 8-bit color depth, which would mean a 256 color palette. Here's the result:

GIF, 256 colors, exact palette

4.72 KB

That really looks much nicer, but the file size has increased to almost 5 KB. The best choice would be PNG, but be aware of the problems older browsers may encounter with PNG:

PNG

444 bytes, 24-bit color depth

JPEG compression does its best job when real-life images need to be put on the Web. Digital photographs or scanned images can be converted in a way that finds a good balance between file size and image quality.

GIF - Web safe colors

46.87 KB Notice the sky on the left upper corner, where you can see that continuous tones are lost. The file size is rather large.

JPEG

27.29 KB The image quality is much nicer in this JPEG version, which was exported at 80% quality.

If it seems necessary to shrink the file even smaller than that, visible imperfections will accrue:

JPEG

6.82 KB The details get lost and a "glass-block" like look appears. Usually compression to this level is unnecessary.