JPEG vs PNG vs GIF — which image format to use and when?

Rahul Nanwani

This post about image format selection was originally published on ImageKit’s Medium blog here.

There are hundreds of image formats available each with a specific use case. I bet most of us wouldn’t have come across 90% of the image formats listed on Wikipedia.

In this post, we would only be looking at the three most commonly used image formats in websites and mobile applications — JPEG, PNG and GIF. Several statistics reports, including the one from HTTP Archive, indicate that these 3 formats together comprise of more than 95% of all images loaded on websites. However, these 3 image formats have significant differences amongst themselves thus making each of them suitable for specific use cases. Understanding these major differences would help us deliver the best possible images to our website and mobile app users.

TL;DR

Use JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth. Use PNG format for any image that needs transparency or for images with text & objects with sharp contrast edges like logos. Use GIF format for images that contain animations.

Compression

Almost all forms of data that we see on the internet — text, image, video etc. — are compressed to reduce the size of data and ensure faster transmission. Choosing the correct format and compression is a major factor that determines image size.

Compression can be of two types — lossless and lossy. In lossless compression, it is possible to reconstruct the original image from the compressed image because there is no information loss during compression. This is not the case in lossy compression i.e. data loss in lossy compression is irreversible. Lossy compression algorithms always have a superior compression ratio (the ratio of size of compressed image to original image) as compared to lossless compression. However, this compression ratio comes at a cost of reduced quality that becomes more evident after zooming in on the image. This noticeable reduction in quality or distortion of the image is called compression artefact.

JPEG is a lossy compression specification that takes advantage of human perception. It can achieve compression ratios of 1:10 without any perceivable difference in quality. Beyond this, the compression artefacts become more prominent. Because JPEG compression works by averaging out colours of nearby pixels (read Discrete Cosine Transform), JPEG images are best suited for photographs and paintings of natural scenes where the variations in colour and intensity are smooth. However, if an image contains text or lines, where a sharp contrast between adjacent pixels is desired to highlight the proper shape, this lossy compression technique does not yield good results.

The blurred edges of text in a low quality JPEG are evident. This text represents a sharp contrast edge between adjacent pixels. Size of this JPEG image is 4.22KB
JPEG image of Taj Mahal which is indicative of a natural scene. Size of this image is 127KB. Even though further compression is still possible for this image, it still is the lightest of the three formats. Source: http://voyage.gentside.com/taj-mahal/wallpaper

PNG is a lossless image format using DEFLATE compression. No data is lost during compression and no compression artefacts are introduced in the image. For this reason, a PNG image would retain higher quality than an image than JPEG and would look a lot sharper, it would also occupy more space on the disk. This makes it unsuitable for storing or transferring high-resolution digital photographs but a great choice for images with text, logos and shapes with sharp edges.

The edges of text are sharp in this PNG image. Yet the size is 3.23KB which is smaller than the JPEG above.
PNG image of Taj Mahal which is indicative of a natural scene. Size of this image is 714KB. Though it looks identical to the JPEG image above, it is the largest among the three formats indicating the unsuitability of PNG for natural images. Source: http://voyage.gentside.com/taj-mahal/wallpaper

GIF is also a lossless image format that uses LZW compression algorithm. It was favoured over PNG for simple graphics in websites in its early days because the support of PNG was still growing. Given that PNG is now supported across all major devices and that PNG compression is about 5–25% better than GIF compression, GIF images are now mainly used only if the image contains animations.

In this case, the GIF image is as sharp as the PNG image on the edges. But the size is 5.45KB which is greater than the size of the PNG image.

 

GIF image of Taj Mahal. If you look closely, there is a lot of noise around the right most tree top and the sky. The size of this image is 230KB. Source: http://voyage.gentside.com/taj-mahal/wallpaper

Transparency

In a simple form, transparency indicates something that is completely invisible. Logos and icons often need to be placed on backgrounds with variable colours. Hence it is desirable, that the background of these logos and icons is made transparent so that a single image can be used over multiple background variations.

JPEG images don’t support transparency and are hence not usable for such cases.

PNG images support transparency in two ways — inserting an alpha channel that allows partial transparency or by declaring a single colour as transparent (index transparency). Partial transparency makes the edges blend smoothly into the background. PNG8 images (discussed in the “Colours” section below) can support only index transparency whereas PNG24 images can support alpha channel transparency.

GIF images support transparency by declaring a single colour in the colour palette as transparent (index transparency). Because of absence of partial transparency, the edges (specially rounded or too-detailed edges) get a poor jagged effect. Though this can be solved to some extent using dithering, with improved PNG support, GIF is unsuitable for images with transparent backgrounds.

This image consists of “imagekit.io” first saved as a PNG and a GIF image and then superimposed on a multi-coloured background. The top PNG logo has smooth edges whereas the bottom GIF logo has jagged edges around the text.

Colours

There is a significant difference in the number of colours that can be supported by these 3 formats.

JPEG images can support around 16 million colours. This is what makes them suitable for storing images of natural scenes.

PNG images mainly have two modes — PNG8 and PNG24. PNG8 can support upto 256 colours whereas PNG24 can handle upto 16 million colours like a JPEG image. Use PNG8 for simple shapes with fewer colours and PNG24 for high quality, complex logos and shapes with rounded corners on a transparent background.

GIF images are limited to 256 colours. If index transparency is used, then one of these 256 colours is assigned as transparent and the remaining 255 are used for other colours.

Animation

Animation, in this case, refers to any change or movement in the image. It doesn’t necessarily have to have frame rates like an animated video, but essentially a part or the entire image changes with time.

Of these 3 formats, only GIF supports animation. This capability makes GIF format suitable for delivering engaging ads and banners. Of late, with the advent of companies Tumblr, 9Gag, Giphy etc. the use of GIF format for memes has picked up.

Season 3 GIF - Find & Share on GIPHY

An animated GIF Image. The blockiness of the colours can be observed (look at the lamp in the background)

These are some of the major differences between the three most popular image formats for web — JPEG, PNG and GIF. To summarise once again, use JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth. Use PNG format for any image that needs transparency or for images with text & objects with sharp contrast edges like logos. Use GIF format for images that contain animations.

ImageKit.io is a cloud-based image optimisation and transformation product that can automatically deliver images in the most suitable format. This ensures that you are able to deliver an efficient graphical experience on your website and app every time, effortlessly. You can get started for free and start delivering optimised images in less than 10 minutes.

If you liked reading this post, please like and share it.