Images are usually the heaviest thing on a web page, which makes them the biggest opportunity to make a site faster. Image optimisation is not one trick but a short workflow: serve the right dimensions, in the right format, at the right compression, and let the browser load them intelligently. Each step compounds the others.
Why it matters
Page weight affects how quickly a page becomes usable, and images often make up the majority of that weight. Heavy images delay the moment a visitor can see and interact with content, which matters most on slower connections and mobile devices. Because the savings are so large and the techniques are well understood, optimising images is one of the most reliable ways to improve real-world performance.
Right size first
The most wasted bytes come from images larger than they are ever displayed. An image shown in a 600-pixel-wide slot does not need to be 3000 pixels wide. The first and biggest step is to resize images to the dimensions they actually occupy, allowing some extra resolution for high-density screens. Everything after this works on less data, so it all becomes cheaper.
Right format next
Format should match content. Photographs compress best in modern lossy formats such as WebP or AVIF, which produce markedly smaller files than older JPG at similar quality. Graphics with sharp edges, flat colour, or transparency belong in PNG or lossless WebP. Choosing per image, rather than applying one format everywhere, avoids both bloated graphics and mushy photos.
Right compression
With size and format settled, compression fine-tunes the trade-off between quality and weight. The goal is the point just before visible artefacts appear. Rather than guessing, compare the compressed image against the original and step back the moment you can see degradation. Photographs with rich texture tolerate heavier compression than images with large flat areas or fine text.
Let the browser help
Beyond the files themselves, how they load matters. Lazy loading defers images that are off-screen until they are needed, so the initial view loads faster. Specifying each image’s width and height lets the browser reserve space, preventing the page from jumping around as images arrive. Serving different sizes for different screens means small devices download small images. And offering a modern format with an older fallback lets each browser take the smallest file it understands.
A repeatable workflow
Put together, the routine is straightforward: resize to display dimensions, pick a format that fits the content, compress against the original until just before quality drops, and deliver with dimensions set, lazy loading on, and appropriately sized variants. Applied consistently, this turns the heaviest part of a page into one of its lightest, without visitors ever noticing a loss in quality.