Image Formats: JPG, GIF, and PNG

With such a wide variety of image formats in use on the web, it is not always obvious which should be chosen. In fact, we find that many people often stick with one format — usually JPEG — even when it is not the most appropriate option.

Below, we discuss the three most common image formats, and how they should be used.

Why Are There Multiple Image Formats?

There are two main types of images you might encounter: photographs and graphics. Photographs are images that are generated from a camera. They are also very complex because they contain a lot of colors. On the other hand, graphics are simpler images. These are generally created using graphics software such as Paint or Adobe Photoshop. And compared to photographs, graphics usually contain a few distinct colors.

When saving these images, there are two goals: (1) preserve the quality of the image, and (2) minimize the filesize to enable images to be easily downloaded or transported.

Consequently, these different image formats were created to most efficiently save — and compress — each image type.

Differences Between JPG’s, GIF’s, and PNG’s

JPEG

The JPEG (Joint Photographic Expert Group) format is used to save photographs. One advantage to using this JPEGs are that they do not have a limited color palette. This means that all of the colors in your images are saved. JPEGS also offer huge compression for images with a lot of colors, resulting in a smaller filesize than would be realized by using another type.

GIF

GIF (Graphics Interchange Format) is primarily used to save graphics. And unlike the JPEG format, it is limited to 256 colors. This is why it is ideal for simple computer-generated images or other images with few colors.

The advantages to using GIF files include:

1. Animation
2. Transparency
3. Small Filesize

The GIF format is also the most widely supported graphics format on the Web!

PNG

The PNG (Portable Network Graphics) format is relatively new. It was created as a successor to the GIF format. However, it is more of a hybrid GIF/JPG format than a true successor.

Some differences between the two formats are:

• PNG format lacks support for animation.
• PNG format has greater support for transparency.
• PNG format does not have a limited color palette.
• PNG format is not as widely supported by internet browsers.

The advantages of using PNGs are they are very useful in accomplishing things that the previous types cannot. While they do create a larger filesize when saving photographic images, PNG’s are better than JPEGs at saving photographs or images with lines.

Additionally, JPEGs use a lossy encoding method for saving files, which can be problematic. For example, if a JPEG file is regularly opened, edited, and resaved, it will begin to lose quality over time. PNGs, however, do not use this lossy method. This means that regularly edited PNG images will suffer no loss.

Choosing The Format For Your Image

Knowing the advantages and drawbacks of each image file format enables you to choose the right type for your image. They will help produce the highest quality image with the smallest filesize.

When choosing your format, here are three rules we follow:

1. Use JPG for photographs.
2. Use GIF for logos, simple graphics, and animated images.
3. Use PNG for transparent images.

If you are wondering why we haven’t mentioned any other image file types, it is because we have focused on the types that are most prevalent and most widely supported. If you are interested in the ICO (Icon) file format, see our article Favicon - What is it?.