What is the best image file type for your website?

Whatever your tastes, it’s undeniable that the majority of people love a good image, especially when it’s large, clear and central, according to research. 

However, glueing eyes to your pages is sadly not as straightforward as uploading a high-quality image and pressing publish - that would be too easy. 

Instead, search engines like to make you jump through a couple of hoops before you can expect a flood of visitors. 

And when it comes to pictures, you need to choose the right image file type for your website. 

This is because search engines like Google use your page’s load speed as an indicator of the web page’s quality - the slower the load speed, the worse the page’s quality.

If you upload the wrong image file type, it can cause your page to take longer to load and increase the chances of that page plummeting down search engine rankings. 

Which begs the question, how do you know which file type is right for your website? 

How many image file types are there?

There are surprisingly more image file types than you can shake your mouse at, each identifiable by thitseir abbreviation. 

However, a few are a must to have on your radar and understanding how they will impact your webpage’s rankings is paramount to improving your page views. 

What is WebP?

WebP, aka Web Picture format, is an image style format created by Google and is supported by all major browsers including, Chrome, Safari, Firefox and Opera.

It facilitates transparent images as well as lossy and lossless image compressions. 

What is JPEG?

JPEG is a type of image style format that compresses digital images via lossy compression, which takes away some of the image’s data to decrease the file size. 

Named after the organisation who created it, JPEG files, or Joint Photographic Experts Group to use their full title, can show 16.8 million colours whilst keeping the image file size small. 

What is PNG?

Portable Network Graphics, aka PNG files, are a form of raster file image originating in 1995. 

They are a highly popular choice among users and support lossless data compression. 

PNG v JPEG 

When it comes to the ongoing battle between PNG and JPEG files, there are pros and cons for both image style formats. 

On the one hand, PNG files produce a much higher quality image than JPEGs ensuring your webpage contains images which are more visually appealing. 

There is a catch in using PNGs, though, as they usually come in larger file sizes than JPEGs and are more likely to slow down your page’s load speed. 

Are WebPs better than PNG and JPEG files?

Due to its ability to enable both lossy and lossless compressions, a WebP’s file size will be smaller than that of a JPEG or PNG file.

In non-technical terms, smaller WebP files will help to reduce your page load speed, thereby improving its SEO performance. 

On average, WebP file sizes are 26% smaller than PNGs and 25-34% smaller than JPEG files when compared to the latter’s equivalent SSIM quality index. 

Which image file type should you choose? 

Whilst PNG and JPEG files have their benefits, WebP files have a distinct advantage because they can provide transparent images with a reduced image file size.  

This comes with the added bonus of improving your page load speed too. 

If you are reading this and panicking about all those optimised JPEG and PNG image files on your webpages, then do not fear - updating them to WebP files is unlikely to make a huge difference considering the time it will take you to repeat the process for each image. 

That said, if you have not optimised your images, you should think about converting your images to WebP files. 

How to optimise an image for SEO 

If you thought choosing your image style format was the key to unlocking Google’s heart, then you were mistaken.

To optimise images for SEO, it is also highly recommended to then upload them into an image file optimiser. 

Fortunately, this is not the sci-fi experiment that it sounds like and simply requires you to visit a website such as TinyIMG, where you can compress your image file into a reduced size.  

As a side note, you must pay attention to your image’s dimensions which will affect the size of your image - the bigger the dimensions, the greater the file size. 

If you upload an image with large dimensions to your website, it is likely the webpage will load the full image and then downscale it to fit on the user's screen, which will negatively impact user performance and your page speed.

To ensure you have not missed opportunities to optimise your page, use a tool called Web.dev which will examine your page’s speed and quality and assess whether your image file size could be improved. 

And we cannot talk about image optimisation without mentioning alt tags - the underrated and underused HTML feature which increases user accessibility to your website by facilitating users with screen readers to comprehend the purpose of an image. 

When using alt tags, it also helps search engines understand the image better thereby increasing the chances that the page in question will become visible for certain search queries. 

Get into the habit of adding alt tags to your images, even if you take nothing else away from this blog. 

If you are interested in optimising your website’s performance, then head over to Barques’ SEO services page.