This section details and simply compares three image formats popular on the web:

With some knowledge of image formats, developers can improve visual quality and save disk space, often simultaneously.

JPEG is suited to natural images where quality can be traded for file size.

For the most part JPEG is the preferred format for web use because it provides advanced and flexible compression without color limitations. However, some images will be better suited as GIF or PNG. Additionally, JPEG does not provide transparency or animation features.

You may have been advised to use JPEG for photos. This is generally good advice because the content of most photos does not compress as well with GIF or PNG. The JPEG format was designed to deal with this type of content. After all, JPEG stands for Joint Photographic Experts Group.

The drawback to JPEG is that the compression is "lossy", meaning some original data is lost in the conversion, purposefully. This drawback is what allows the format to represent complex, real life images as efficiently as it does. However, the compression can also create artifacts, visual imperfections, usually at the edges of objects in the image. As the compression level increases, quality decreases and the artifacts become more noticeable.

Developers can adjust compression via quality to balance between desired visual quality and file size.

Most popular video and audio formats employ similarly lossy compression. If they did not, the file sizes would be a great deal larger. The MP3 and DVD formats are lossy. Artifacts in lossy compression always exist, but can go unnoticed. If english text documents were compressed with a lossy algorithm, readers might find some sections of text unreadable or apparently full of typos, but would still understand the document as a whole.

In the end, JPEG is the best choice for most images used on the web, but it also the format most often used for images it should not be. Because of this, it is sometimes best to use JPEG only after verifying GIF and PNG are not viable options for the specific image or group of images you are dealing with.

GIF is suited to simple images with less than 256 colors...

Probably the second most common format used on the web, GIF employs lossless compression, meaning all image data is preserved. However, since GIF is limited to 256 colors, it is not exactly lossless altogether. Some color information for images with more than 256 colors will be lost.

GIF compression works well for images with large sections of the same color. Typography, line drawings, diagrams, cartoons, icons and even screenshots of a desktop application can be compressed well with GIF.

A good example of this is the website screenshot from our examples section. The resulting file is a mere 25k when saved as a GIF, but would be 8-10 times that as a JPG of similar quality. This example underlines why we consider it important to consider formats other than JPG for some types of content. However, it should also be remembered that JPEG can represent natural images, which are more difficult, on a similarly better scale.

The screenshot has relatively few colors and many blocks of like color. In fact, the images which make up our site are GIF, resulting in tiny files and a crisp clean look. For artificial images like these, even those with more than 256 colors, GIF can provide great benefit. If not, perhaps PNG will, as it uses a similar method of compression.

PNG is suited for images where quality is most important.

PNG provides lossless compression similar to GIF, but allows full color and full transparency. If you have a high quality input image, such as a Photoshop PSD, you might want to use PNG to provide this content with exact original quality on the web. For example, PNG is a good choice for displaying the work of digital artists online. It is also selected for artificial images which have too many colors to be accurately represented by GIF.

PNG is the only format of these three which would make a viable format for storing originals.