JPG vs PNG vs WEBP vs GIF vs SVG – when to use one over the other

DanielJanuary 5, 2023April 8, 2023

A reader emailed me after reading the post about using the HTML image decoding async attribute and asked what are the performance implications of the different image formats such as JPG, PNG, WEBP, GIF or SVG.

Therefore in this short post, I will try to detail when to use each file type over the other.

The short answer: try to use the WEBP as often as possible

WEBP is a raster image type released in 2007 by Google. Overall it provides the best performance compared with the other file types and also supports transparency.

While in the past WEBP was having some browser compatibility issues, nowadays it is fully supported in all the major browsers. For the older browsers we can use @supports to provide fallbacks for WEBP images.

If it helps I've made this script to convert any images to the Webp format.

The long answer: JPG vs PNG vs WEBP vs GIF vs SVG

There are two main types of image formats.

Raster or bitmap types: they store the image data as a grid.

This makes them great for complex pictures like the ones we take with a camera, but they come at the expense of:

• big image file sizes, especially at high resolution
• are hard to scale up. Can lose quality when scaled up

The raster or bitmap types include the following:

• jpg: lower filesize, but does not support transparency
• png: can store transparency, but comes with a bigger file size
• webp: just use this one 😄. You can find here a tool to convert from jpg to webp
• gif: comes with the advantage of animation and Progressive loading but supports just a maximum of 256 colors. In comparison, PNG and JPEG can display millions of colors.

The second image type is the vector format. It uses geometry and code to represent images. Somehow similar to Font Awesome icons.

An example of the vector format is the SVG format. SVG comes from Scalable Vector Graphics and is great for flat graphics or logos given that it can scale to any size without losing quality.

However, the vector format is not great for representing complex image content.