JPEG vs. PNG images

One of the first, basic problems you have when making a HTML etext is how to save the images.

Images for PG HTML should normally be saved as either JPEG (.jpg) or PNG (.png).

GIF (.gif) may be used instead of PNG, but PNG was specifically designed to be a superior replacement for GIF, and so where there is a choice between PNG and GIF, PNG will nearly always be better. We will therefore ignore GIF for this discussion.

PNG and GIF are similar formats, designed to do the same job. However, there is a big difference between PNG/(GIF) and JPEG. If you choose the wrong one, your image will be either much bigger than it needs to be, or of much lower quality than it needs to be.

JPEG for shaded images and photographs

JPEG is designed for shaded images with a lot of small detail. Photographs, or pictures with a photographic level of detail and shading, should nearly always be saved as JPEG.

Here are some typical images that should be saved as JPEG

PNG for line drawings

PNG is ideal for simpler images, with large, unshaded areas, and sharp edges rather than graduated, shaded ones. Line-drawings should usually be saved as PNG. Maps, diagrams, and ornamental drawings are also good candidates for the PNG treatment.

Here are some typical images that should be saved as PNG

If you're not sure . . .

There is no clear, bright line between what should be saved as JPEG and what should be saved as PNG. Take a very simple, bare line drawing, a definite PNG candidate, and start adding shading to it. After a while, the degree of shading will be enough for it to cross the line and be better saved as JPEG. Somewhere in between, its best format becomes dubious.

When you're in doubt about the best format for an image, you can look at your image as a PNG, and then save it as a JPEG. Compare the sizes of the resulting files. If the JPEG is bigger, or even within a few percent of the size of the PNG, then use the PNG. If the JPEG filesize is significantly smaller, then use the JPEG.