Which Image File Formats Should You Use for Your Website?

Choosing the Best Image File Format

There are four main file types used for images: PNG, JPG, GIF and SVG. Each of these has it's own pros and cons, plus reasons for using them.

Not all though are suitable to be used for photos, diagrams or banners for your website.

In this article, we look at what each image file type is commonly used for, and explain which ones you should be uploading to your website.

Image File Formats Are Not Created Equally

Every image uses one of two file types: vector or raster. Raster images use pixels and the file formats of JPG, PNG and GIF. These are the types of formats you will see on a website. Vector images use proportional formulas, and the file format SVG, not seen on websites.

This means that you will need to choose between using a JPG, PNG or GIF image on your site.


The JPG format uses only a little storage space and is very fast to upload and download. It can show millions of different colours, and is the best option for photographs. JPGs use lossy compression, which means that when the are saved (or made smaller), they can make things blurry. While this doesn't really affect photos, it can significantly make text or graphics blurry.


The PNG format was created to replace the GIF one. It can support 256 indexed colours and is used for complex images or those you want to remain looking untouched regardless of resizing. A PNG can also support transpancy, which lets you use your logo without any background colours. They use lossless compression, so do not loose any quality or information when saved or resized. A PNG is a large file though.


The GIF format has a small file size and isn't capable of displaying millions of colours. It does support transparency aspects, but not suitable for photos or images with lots of colours. GIF files can also be animated, but do have a small file size due to fewer supported colours.

When using our CMS, we only accept image files which are JPG, PNG, GIF and WeBP files (a file format developed by Google to reduce the size of images, but not commonly used). 

For more information on using and installing image files, please watch our video tutorials.

Tags: web design  

Posted: Friday 6 March 2020