Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

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

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.

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.
low resolution grid with super mario
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.
svg code example

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

Home Screencasts Best of Newsletter Search X