Home / Articles /

Choosing the Right File Format for Your Images

Want to reduce the size of your web pages? When reviewing websites I often find that images are one of the largest contributor to the page size. In this article we will look at the different image file formats available and then compare them to see which is best for each situation.

There is no single best image format and choosing the right one will depend on what is in the image. I’ve created a cheat sheet at the end of the article to help you make the right choice.

Raster Images vs Vector Images

Image files are divided into two main types, raster and vector, with raster being the much more common type.

Raster images are like a tile mosaic, they use a grid divided into squares with each square being assigned a colour. When the individual tiles or boxes are small then it appears like a clean clear image. However, if viewed up close the individual tiles will be obvious and the image will look boxy. For this reason, raster images do not scale up well.

A close up view of the individual pixels that make up a raser image.

Vector images use a series of coordinates and lines to create an image. First the points are plotted relative to one another, then connected by lines, either straight point to point, or if the line is curved a mathematical formula is used to create the curve.

Unlike raster images that loose visual quality when they are scaled; a vector image can be scaled infinitely with no issue as the coordinates are just moved proportionately.

Unfortunately there are fewer situations that vector graphics can be used when compared to raster images. Pictures taken with a camera or scanned can not be practically converted into points and lines and are much more easily stored as raster images. This means that vector graphics tend to only be ones created from scratch on specialist software.

GIF

GIF is the oldest image format still used online and dates back to 1987.

There are very few, if any, situations were GIFs should still be used on websites today as there are more modern formats that perform the task better.

Short animations or videos, the thing most associated with GIFs, are more efficiently shown in video formats such as MP4 or GIFV. In fact many images shown on social media (such as Twitter) as ‘GIFs’ are actually MP4 video files.

For files that require transparency then either PNG, SVG or WebP are more suited, these formats are discussed below.

JPEG

JPEG is the second oldest file type still in regular use, it dates back to 1992.

JPEG files (or JPG, they are the same format) are one of the most commonly used formats on the internet. They are best suited for photographs and complex images, many digital cameras save the pictures you take as a JPEG file.

JPEG images use ‘lossy’ compression, that means as you make the file size smaller you will start to loose image quality.

Image quality decreases as compression increases on a jpeg image.

PNG

PNG is a relatively more modern format, it was introduced in 1996 as an open source file format in competition with GIF which was originally a patented format.

PNG can be used for photographs or other complex images. It has two main advantages over JPEG, firstly it can allow transparency in images and secondly it produces smaller file sizes when the image has large areas of the same colour or a limited colour palette.

PNG uses lossless compression on images, typically this means that PNGs file sizes can’t be reduced to the same extent as JPEG images. To reduce file size unused colours are stripped from the data, so images with a very limited colour palette can achieve good reduction in file sizes.

Most of the images on No Lesser Panda are in PNG format, the sharp lines and big blocks of colour are well suited to this file type.

WebP

WebP is the most modern image format that is fully supported across all modern browser platforms. Introduced by Google in 2010 WebP is designed to ultimately replace JPEG as the standard image format for photographs on the internet.

Like the other raster formats WebP breaks the image into a grid of squares, however it differs by not storing data for each square but determining the colour of some squares based on the squares around it. This reduction in stored data allows for a reduction in file size.

WebP allows for either lossy compression, like a JPEG or lossless compression like a PNG. Choosing the right type of compression can help maintain image quality.

TIFF

TIFF or TIF images are widely used in the printing industry and in some image processing software, however the file format is not well supported by browsers and should not be used on websites.

SVG

SVGs are very different from the other image types, rather than breaking the image down into sections an SVG uses a series of coordinates and mathematical formulas to create the image.

SVGs are very useful for creating icons or simple diagrams. A great feature of these files is that because the images are made with points and lines they can also scale infinitely without any loss in quality.

Choosing the right file format

There are two general rules for choosing the correct image file format, photographs should be in WebP lossy format and simple icons should be SVG where possible.

This however leaves a lot of grey areas, so lets take a look at them now.

In some unusual circumstances you may not be able to use WebP yet, in which case it is best to keep photographs in a compressed JPEG format. An example situation would be if you need to support a very old browser such as Internet Explorer.

You may not have access to a graphic designer or the software required to make SVG files in which case simple icons that have transparency are best saved as PNG rather than WebP in my experience. It is however worthwhile running a comparison if you can.

For more complex icons and cartoon type graphics there is a tipping point when PNG and WebP start to become more efficient than SVG. This mostly depends on the number of points that would be required in the SVG file and is particularly true of the image of a relatively small size, for example less than 300 x 300 pixels. Again, you may need to run a comparison on your image for definitive results.

Additionally in my experience I have found carton images with large blocks of colour, such as the images on No Lesser Panda are more efficient as PNG files rather than WebP.

Images primarily made up of text convert well to PNG or lossless WebP, particularly single coloured text on white or transparent backgrounds.

For diagrams and flow charts these tend to have large blocks of single colour and limited colour palettes which can often be suited to PNG images, however depending on the nature of the diagram and the number of colours used WebP can also be very efficient.

Cheat Sheet

Here is a breakdown of the best file format for each image type, for the two rows in the middle it is often worthwhile comparing the two suggested formats to find the best option.

Image type	Optimum format	Secondary option
Simple icons	SVG	PNG
Complex icons (small)	PNG	SVG
Complex icons (large)	SVG	PNG
Cartoon images	SVG	PNG
Complex diagrams	PNG	WebP
Photographs	WebP	JPEG

Converting Between Formats

You can use the Squoosh app to convert between the different raster image formats and see the live results. (They even have a red panda picture as a demo image!)

Different image formats are available in the drop down menu and you can switch between lossy and lossless formats of WebP via a tickbox.

If you are using specialist software such as Photoshop or Lightroom to save images then you can choose the format to save your images in. As of V23.2 of Photoshop (2022) you can save and open WebP files.

Next Steps

Now that you have the image in the correct format you can look at these techniques to reduce an image file size.

Want to know how sustainable your website is? Learn more about No Lesser Panda’s website sustainability audit.

You are here: Home / Articles / Choosing the Right File Format for Your Images