Optimising images for the web

Image optimization is about shrinking the file size of your images as much as possible, while keeping quality, so images look perfect but your page load times remain low.

It's also good for SEO, as Google takes into account page load time.

Use images that are a suitable size for your where you intend to use them. Especially if you are working with images taken from a camera, dimensions are often much larger than you need.

I often double dimensions for retina screens, (so an image displayed at 300x200px would natively be 600x400px), but I often then don't export images at 100% quality from my image editor - often 75% is good enough without losing any fidelity.

Once I have a folder of images, I like running them through the following tools:

ImgOptim - my favourite

ImageOptim is a free Mac app and web service that optimises and reduces file sizes. Works for PNG, JPEG or SVG. It also has a CLI option for developers.

SVGOMG

SVGOMG - Jake Archibald's excellent web based tool lets you either drop images in or paste markup for SVG files and has a ton of optimisation options.

Great for pasting in SVG code exported from Figma or Illustrator, which can often be unecessarily large.

TinyPNG

TinyPNG has an online tool you can drag and drop images onto. up to 20 at a time. Works for WebP, PNG, or JPEG files.

Bonus Tip

Lazy load images - add the following attribute to your image tags <img loading=lazy/> and any Chromium powered browser or Firefox will load images at different priorities depending whether they are above or below the viewport.

Images marked lazy will defer being loaded until they have reached a calculated distance from the viewport (i.e. off screen but close to scrolling into the viewport), which will help with page load speeds.

This will still load huge unoptimised images if you don't optimise them, so still use the tools listed above!