When to use jpgs

JPGs are suited for photographs or other high color images because of the following reasons

• Photographs are high color images and this is what is needed to compress the images using the JPG algorithm.
• Gradients and subtle colors changes are a common feature of photographs. Also, color gradients contain pixels of several colors and this is what is required by the JPG compression algorithm. (refer above point)
• JPG allows various levels of compression. This helps you choose the correct one for the image in question.
• Even high JPG compression on photographs is not very perceptible.

Original JPG (3838 bytes). Consider this 100%


82% quality of the original (3184 bytes)


60% quality of the original (2310 bytes)


51% quality of the original (1981 bytes)
Note that pixelation starts to appear and is perceptible near the 'crown' because this area has some sharp color changes.


40% quality of the original (1569 bytes)


20% quality of the original (783 bytes)

For details on why GIF format should not be used for photographs, refer the section on When to use gifs.

When to avoid JPGs

The JPG algorithm does not do justice to images with sharp edges such as text, cartoons, line-art etc. You should choose the GIF file format for such images. For further details, refer When to use gifs. For further details, refer When to use Gifs and JPGs and Using JPG and Gif in a single image.

Also, JPG does not support color transparency and animation. You might have to use the GIF format if you want these features.
Having said that, I have a interesting tip on how to make animated JPGs using a little JavaScript. It's more like displaying a series of JPG images quickly at a particular place than actual animated JPG creation!