How to optimise images for the Web without losing quality

Why should you optimise the images on your website?

If you’re publishing a lot of content, you’ll find yourself attaching images left and right. This opens up the possibility of publishing unoptimised images, which can have the following consequences:

• Slower website
• Worse user experience
• Accessibility issues
• Poor image quality

And to top it off, the combination of the above could have a negative impact on SEO.

Everyone and their dog claim that images improve engagement. But if you do it wrong, you might end up with fewer conversions and less traffic – and not everybody talks about that.

Thankfully, it’s easy to avoid this grim outcome. Depending on your content management system, you could avoid these mistakes in just a few minutes.

Summary: how to optimise images for the Web without losing quality

1. Use PNG only for images with transparency, and JPEG for images with backgrounds.
2. Use online image compressors to reduce the file size, aiming for 70% of quality for JPEG.
3. Reduce the resolution of your images to match the display size (or to be twice as large, if your website supports Retina devices).
4. Write human-friendly, accessible file names and alternative text descriptions.

4 tips to optimise images for a website

Here’s how to optimise images for the Web, with the most impactful steps first. You should be able to do at least the first few without needing a web developer.

1. Use the correct file format

Even if you don’t know how to change it, online converters will do it for you in a few seconds. Here’s the rule of thumb:

“Use PNG for images without background, and JPEG for photos with background.” – Tomasz, our founder & Web Design lead

Interested in the details? More often than not, saving a photo as a PNG will result in a heavier file. Because PNGs support transparency, the files include additional data to display the “empty” pixels. Saving a picture from your camera as PNG will add a lot of useless information to your files, increasing their weight.

Vector graphics represented by the SVG file format are a good alternative. These files use code to display lines and shapes. Because of that, they scale indefinitely without increasing the size of the file – the volume of code remains the same and your computer just renders it differently.

Using WebP, another format with support for transparency, is becoming more of a valid option. The only hurdle? It’s still something that often doesn’t work out of the box on many content management systems.

Plus, there are issues with Safari and certain MacOS versions. These only affect a few percent of the general population but it’s common for businesses to use MacOS with only partial support for WebP. If you’re in B2B, it might make life tricky for you.

2. Compress the images, aiming for 70% quality

This is a huge one. Some images can be shrunk from over 1 MB to just 100 kB in an image compressor. We already did something similar by saving your non-transparent PNGs as JPEG. To kick it up a notch, you can find web apps that compress images. We recommend setting the quality to around 70%, especially for JPEG.

JPEGs use lossy compression, meaning your quality will suffer. How much? Play around with some compressors to find out. The rule of thumb is to compress JPEG files to 70% quality. You’re unlikely to notice any drop in quality at this level. For less complex images, dropping it down further can work as well.

3. Change the resolution of your images

This one is a bit tricky but still manageable. To get the leanest files possible, you’d need to know the different display sizes of each image on your website. But let’s start with the simple things.

Currently, the most popular display resolutions are 1920px and 1366px wide. On top of that, images rarely take up the entire width of the screen. Other than background images, you’re unlikely to exceed 1080 pixels of width. Because of that, there’s no point uploading 4K pictures.

There is one reason for images larger than 1080px, and it’s connected to Retina devices. But to make it simple, you can settle for this rule of thumb:

“Use images that are 1080px wide. If it’s obvious that the image displays at a smaller resolution (and you know how to check what it is), use that – or eyeball it.” – Łukasz, our Web Developer

Would you like to see a guide on how to check the display size of the image? Let me know in the comments.

4. Make your file names and alternative text accessible

No matter what you hear from SEOs, file names and alt text are not for SEO purposes.

“When an image is crucial for the context of your page, give it a useful name and write alternative text describing the context it provides.” – Dawid, our Product Manager & SEO lead

For decorative images, you can (and should) skip this step. Just make sure that empty alternative text is properly implemented on your website. You’ll probably need a developer for that, but if your decorative image is missing alt text in the wrong way, screen readers will attempt reading the title. And this might not be the greatest experience for people using them. When the alt text is empty, screen readers skip the decorative images – that’s what we want to happen.