How to optimise images for the Web without losing quality

*Based on our own research of SaaS product images and stock photos before and after compression and resizing.

Summary: how to reduce the image size for the Web without losing quality

1. Compress images for free to reduce their size
2. Use PNGs sparingly
3. Follow the Web standards for image resolution
4. Replace PNG logos with vector graphics (SVGs)

1. 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.

JPEGs use lossy compression, meaning your quality will suffer. How much? Play around with some compressor tools to find out. You can’t go wrong by using the default settings.

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.

For this job, we recommend TinyPNG and Optimizilla.

2. Use PNGs sparingly

The PNG format is mostly for images that need transparency, e.g. SaaS product images or illustrations.

For images with a background, e.g. unedited photos, JPEG will usually be much faster. Some photos with a limited number of colours can perform better as a PNG, but that’s an extreme scenario.

You can change the format from PNG to JPEG using one of numerous online converters. Alternatively, on most operating systems you can change the file name when downloading it to save it in a different format. Simply append the desired format with a dot in front of it – e.g. going from downloading “image” to “image.jpeg”.

Use PNG for images without background, and JPEG for photos with background

Tomasz, our lead web designer

Which images are typically saved as PNG when they shouldn’t? Apple is one of the worst offenders, with MacOS screenshots saved as PNG by default. If you’re on a MacBook, we recommend changing it to JPEG – you’ll save A LOT of storage on your device.

Some stock photos download as PNGs as well, either because of the default settings of the website or because the author uploaded them as such.

3. Follow the Web standards of image resolution

This one is a bit tricky but still manageable. To get the smallest files possible, you 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. But 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.

Dawid, our quality assurance lead

Apple uses Retina displays that can display 4x the amount of pixels of a typical display – that’s double horizontally, and double vertically. This means that on e.g. a MacBook, if you want to show a 500px image and have it look its best, you need to upload it as 1000px wide.

4. Replace PNG logos with vector graphics (SVGs)

SVG is a file format that uses mathematical equations, rather than pixels, to draw shapes on the screen. They can be multiple times lighter than the same image in a PNG format, which is a common one used for company logos – they typically require transparency to display them.

If you’re using client logos to build credibility or showcasing the integrations possible with your product, make sure to look up SVG logos, rather than using PNG or JPEG.