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. And amongst the many of them, how do we select the best image format for our needs?
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.
Image Formats And Their Nuances
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.
Why?
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 image 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. 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 increasingly evident as we zoom 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 a compression ratio 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.
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 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.
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.
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.
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, however, with improved PNG support GIF is unsuitable for images with transparent backgrounds.
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 up to 256 colours whereas PNG24 can handle up to 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 a part or the entire image changes with time.
Of these 3 formats, only GIF supports animation. This capability makes GIF image format suitable for delivering engaging ads and banners. Of late, with the advent of companies like Tumblr, 9Gag, Giphy, etc. the use of GIF format for memes has picked up.
An animated GIF Image as an example.
The blockiness of the colours can be observed (check out the lamp in the background)
The use case for each image format is different, and the best way to leverage your visuals is to optimize them based on the purpose and application of each. Want to optimize images? Start your free trial today!
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.