JPEGs are better suited to displaying natural, complex images. Unlike a GIF a JPEG is always full 24-bit colour, so on anything but a 24-bit monitor it will always be dithered by the browser. If you're fairly certain your target audience is 24-bit capable and quality is an issue, then plump for a high quality JPEG every time. The images will be smaller than a GIF too. If on the other hand, quality isn't an issue, but size is then go for a lower quality JPEG, as it will be substantially smaller than the equivalent GIF. The trade-off is that you lose the control over the image that GIF gives you: it's less easy to specify colours and the quality can be dire.

This is a high quality JPEG of a duck which takes up 43k of disk space.

The same picture, this time compressed to medium quality. There are virtually no visible artifacts of the JPEG compression process, and yet the image takes up only 13k.

Push the process too far, though, and this is what happens. This is the same image compressed on the lowest quality setting in Photoshop, and then blown up four times. Note the tell-tale squares of colour, as well as considerable false colour. Nonetheless, there are times when this level of quality is acceptable, perhaps as a background image. The image is only 3.5k at this level of compression.

Because the image is reasonably complex, with lots of natural variation, it does not suffer too badly when viewed on an 8-bit monitor. Assuming you are running 16-bit or 24-bit colour, here's the same picture seen under 256 colours in Netscape.

Related pages:

Introducing GIFs and JPEGs

GIF examples

some non-Photoshop tricks for improving your Web graphics.

Or:

back to the top