What image format should I use?
Marc Castles
JPG, GIF, PNG, APNG, WEBP, SVG and AVIF are the main image formats used on the web today. Each format has its own strengths and weaknesses and knowing when to use each format can be confusing. By the end of this article you should be able to choose the right image for your situation.
What is an image format?
An image format is they way a computer stores the colours of an image as computer code. Each format stores this information differently, which directly impacts the size of the file, which in tern directly impacts how fast the image will load on your website.
Different image formats are suitable for different image types, such as photographs and logos. To pick the right format for an image you need to know the difference between the various formats available.
GIF
A GIF (Graphics Interchange Format) was created in June 1987 which makes it old technology relative to newer image formats. Technology has advanced and there are much better alternatives to use. A GIF file only has a palette of 256 colours available so converting an image to GIF will most likely reduce the quality of your image.
There are two main features to a GIF image that have kept it relevant and they are animation and transparency. This is partly why the format is popular for memes on social media sites. Transparency means that a portion of the image can be transparent, showing the content beneath it. Though unlike newer formats GIF can only have fully transparent or fully opaque pixels, there is no partial transparency support.
JPEG
JPEG stands for Joint Photographic Experts Group and was created primarily for storing photographs. Saving an image as JPEG will create a decent quality image at a reasonable file size.
JPEG also supports progressive download which means a low quality version of the image will load and the quality will improve as the image is downloaded. This is great for users that have a slow internet connection.
PNG
A Portable Network Graphic is best used for images that have flat colour or text that needs to be sharp. Being a raster image format means you can use it for photographs but the created file will likely be much larger than other formats like JPEG.
Like GIF, PNG files support transparency. PNG transparency will look smoother than GIF as it supports partial transparency.
APNG
APNG is an extended version of PNG that allows animation to be used, making it a complete replacement for GIF on modern browsers.
WEBP
Google created the “Web Picture” format specifically for website images. It is based on the WEBM video format and image sizes are typically smaller than JPEG or PNG. WEBP also support transparency.
SVG
SVG stands for Scalable Vector Graphic and is a lot different to the other formats on this page. Like the name implies, the format is a vector format which means the image is built with mathematical equations instead of pixels. Vector images can scale to any resolution without distortion which is great for responsive websites. SVG also support transparency.
SVG images are ideal for logos or any image that is made up of flat colour.
AVIF
AVIF is a newer format that is based on the AV1 video format. It essentially replaces the WEBP format and files saved as AVIF are typically much smaller at the same visual quality. One downside is compressing to AVIF can take extra time due to the complexity of the algorithm.
Ok, so which one should I use?
To help make the choice of what image format should be used I have created this free info-graphic. Feel free to download it, print if off and share it with your friends. Hopefully it will be useful for you when you need to pick the best image format for your website.
