How to Optimise Your Website Images

If you’re reading this page we’re guessing you know why it’s important to optimise your website images. However, if you’ve been told you need to do it but don’t know why, then check out our other article first before you read on.

As for how to optimise them, well we could go on for reams and reams about all the details and different ways to optimise your images. But, we’re keeping it simple with the three most effective ways you can optimise your website images.

The Right Size

If you’re image needs to be 500px wide, don’t make it 1,500. The simple reason for this is that it will create a larger file size than necessary, a file that needs to be downloaded from the server to be displayed.

Large file size takes longer to load which increase the page load time (bad for SEO and user experience) and increases the carbon emissions released by your website (bad for life on this planet).

The Right Resolution

Images that are taken straight from your phone or camera, and those downloaded from stock image sites are more often than not, print-ready.

However, images don’t have to be print-ready quality for websites. They can have a much lower image resolution and still look great.

That’s because print needs images to have 300dpi (dots per inch) whereas digital platforms only need 72dpi, although, modern retina screens display at 144dpi.

Converting your image from 300dpi to 72, or 144, will massively reduce the data the file holds, in turn making it much smaller and better optimised for the web.

Resolution conversion can be done through professional design software such as Photoshop, but if you don’t have that then an online tool like convert-dpi.com can help.

The Right File Type

There are several file types to choose from depending on the image you’re saving:

JPG

Also known as JPEG. This file format can manage a large amount of data and colour. Which makes it the best file format for photographs, or graphics with lots of texture and detail.

With Photoshop you’re able to adjust the image quality of a JPG. You’ll be amazed at how much you can reduce the % image quality, and in turn file size, of a JPG file without actually losing any obvious visual quality.

The trick is to use the ‘2-Up’ viewing option so you can see the original file next to the reduced-quality version. Adjust the quality % until you’ve reduced it as low as you can before you start to see the image going boxy (see the example below). Once it does that increase the % to where the image looks good again and save it ready for your website.

PNG

This file type is perfect for simple graphics or files that need transparency, such as logos and icons.

It’s also generally a much smaller final file size than a JPG so is a good one to use if the image is suitable.

There are two formats of PNGs – PNG-8 and PNG-24.

PNG-24 can handle a much larger colour palette than its counterpart. However, all those extra colours come with an increased file size so if the image works in PNG-8 then that will be the best option.

WEBP

This is a modern image format and is the best option for optimised website images.

It’s essentially a compressed JPG or PNG file and can save up to 34% on your file size.

The beauty of the WebP format is that it has lossless image quality. Meaning your final image isn’t compromised by the compression. It also supports transparency in images, meaning it’s a great alternative to both JPG and PNG files.

SVG (Scalable Vector Graphic)

Vector images are essentially super simple files which can be scaled to any size without losing quality or risking pixelation. Meaning they’re perfect to use when building a responsive website.

They are only suitable for simple images, for example, images with a limited colour palette, meaning it’s the ideal file type for design assets such as logos, icons, and illustrations.

Due to their scalability, they are a great choice not only for their display capabilities but also because they are often very small file sizes. Making them perfect for optimising your speed and reducing the impact your website has on the environment.

GIF

This is an animated image that is limited to 256 colours (the same amount as PNG-8s), so is best used for animating simple graphics.

Compression

If you can’t save your files in a WebP format (already compressed) and need to get the file size down further then you need to compress it.

Compression is a process that removes unnecessary background data and can shave 5-10% off your total file size.

The best way to do this is with the ‘Save for Web’ option on Photoshop as mentioned above in the JPG section.

However, if you don’t have Photoshop, you can use several free, online compression tools like this one. It’s called TinyPNG, but it works on JPGs too.  You can run your file through it multiple times, but a word of warning, don’t compress too much as you’ll lose image quality as well as background data.