When to use PNG, GIF or JPG

Gary Eckstein Internet 1 , , , , , , , , , , , , , , , , , ,

Print Friendly Print Get a PDF version of this webpage PDF

Unfortunately no one image file type is best for all Website needs. The Image type used for images on your Website is dependent on numerous factors of which the prime are; image quality requirements, the content of the image, the number of colours and any size limitations. In general the aim is to have the best quality at the smallest file size; quality is obviously important from the visitor and branding angle whereas size is critical from a load-time and Search Engine Optimization (SEO) perspective. The three image filetypes which all newer browsers handle and which are best for Web image rendering are Portable Network Graphics (.png), Graphics Interchange Format (.gif) and Joint Photographic Experts Group (.jpg and .jpeg). Bitmap (.bmp) should never be used due to its large file sizes produced. This article is concerned with how to choose the best image format for images on your Website (There are numerous non-format factors which are important is attaining the best quality with the smallest filesize such as ensuring that the dimensions of the image are appropriate however these are not covered in this article).

Which Image File-Type to Use

PNG

PNG has excellent compression, a wide range of transparency and excellent interlacing. PNG was introduced as a replacement for GIF and supports more colours and greater compression among other advancements. PNG does not itself support animation as GIF does and can produce larger file sizes than GIF with limited colour images. PNG provides excellent quality for line art and text images conversely is seldom a better choice than JPG for photographs producing significantly larger filesizes.

GIF

GIF is well suited to blocks of solid colour, line art and text with limited colour and sharp edges. The GIF format was introduced prior to PNG and like PNG is not suitable for photographs. In most situations PNG is preferable to GIF due to the formers greater compression and PNG having a far greater range of usable colours. GIF however does produce smaller file sizes with comparable quality compared to PNG in some situations (such as solid blocks of colour) and is able to render small sized animations.

JPG / JPEG

JPG is best used for photographs and has become the most widely used format for digital photography. JPEG is good with smooth transition of colour such as paintings and photos however is not ideal for situations where multiple edits of the image is required (as JPG loses data every time it is edited). Web images are seldom edited multiple times therefore the lossy characteristics are unlikely to be a deciding factor for Web usage. JPG produces inferior quality images with a larger filesize for line art, text and images with sharp lines such as many logos (PNG and GIF are usually better for these images).

Examples

The examples below illustrate when it may be best to use a particular image format:

Line Art and Text

For line art and text, PNG and GIF will give a smaller filesize with better quality than JPG. The first two columns of the example show that occasionally PNG gives a smaller filesize than GIF and vice-versa.

Photographs

For photos it is almost always preferable to use JPG due to it’s superior photo quality rendering and better compression.

Summary

  • For Photographs and highly detailed images use JPG.
  • For text, logos and line-art use PNG or GIF.

All newer internet Browsers (Firefox, Safari, Opera, Google Chrome, Internet Explorer etc.) fully support all three image filetypes. As there is not speed or quality penalty for using multiple image filetypes on a Webpage it is recommended to use the image type most appropriate to give the best quality at the smallest file size.