Image Optimisation: Less Data Volume, Faster Load Times

A typical production workflow delivers images as JPEG or PNG directly from a camera or graphics application. Such a JPEG can easily weigh 2 to 5 megabytes, even though only 400 pixels wide need to be displayed on a smartphone. The browser downloads the full image and scales it down via CSS – wasting bandwidth, battery life and valuable milliseconds of load time. On mobile connections with limited bandwidth, this adds up across a page with 10 to 20 images to several megabytes of unnecessary transfer.

The direct connection to performance: Largest Contentful Paint (LCP) is determined in most cases by a hero image or product photo. When this image is delivered uncompressed, in the wrong format and at a desktop resolution, it creates a rendering bottleneck that pushes load time into the red zone even with a fast server and optimised JavaScript. Our performance analyses consistently show that image optimisation alone can improve LCP by 1 to 3 seconds (project experience). That often corresponds to the difference between "poor" and "good" in Google's assessment.

JPEG and PNG were the standard for decades but were never designed for the demands of modern web performance. WebP and AVIF are two newer image formats developed specifically for efficient web delivery, producing significantly smaller files at the same or higher perceived quality.

An image that looks optimal on a 27-inch monitor at 2560 pixels wide is unnecessarily large on a smartphone with a 390-pixel viewport. Without responsive images, mobile devices still load the full desktop resolution – a design flaw with significant performance consequences. The HTML attributes srcset and sizes solve this problem: they give the browser a selection of image variants at different resolutions and describe how large the image appears in the layout. The browser then autonomously selects the right variant for the current device and display resolution.

On initial page load, only the images in the visible area (above the fold) are actually relevant. All other images are only needed when the user scrolls down. Without lazy loading, all images on the page are loaded immediately anyway – including those at the bottom of a long product list that may never be viewed. This wastes bandwidth, strains the main thread and delays the rendering of visible content.

Important: the LCP image – typically the hero image or the first visible product photo – must not be set to lazy loading. It receives fetchpriority="high" instead, and if needed, a <link rel="preload"> hint in the HTML head so the browser begins the download as early as possible. Only the correct prioritisation of the LCP image combined with lazy loading for all remaining images maximises LCP improvement while minimising total data volume.

Compression reduces the file size of an image without – or with only minimal visible – quality loss. There are two main categories: lossless compression reduces redundant data without any information loss, making it suitable for graphics, logos and screenshots with clean edges. Lossy compression, on the other hand, also reduces actual image information, which for photos and natural subjects results in smaller files without the human eye perceiving a quality difference.

Manually optimising every image is neither practical nor scalable for websites with dozens or hundreds of images – especially for CMS-based projects with regularly changing content. We implement fully automated pipelines that generate all required variants in optimised formats with every image upload or build process.

Image optimisation is not a one-time intervention but must be integrated into the editorial workflow. When an editor uploads a new image tomorrow, the pipeline must automatically generate all variants – without manual post-processing. We have extensive experience integrating complete image pipelines into the three most widely used CMS systems.

The following figures reflect typical improvements we achieve in our projects through complete image optimisation. Actual results depend on the starting condition and type of website – shops with many product images often benefit more than simple corporate websites. Our references page describes typical project scenarios in detail (project experience).

Image optimisation is a central but not the only factor in fast load times. A poorly configured server infrastructure with high TTFB values or render-blocking JavaScript can limit the impact of even perfectly optimised images. Image optimisation also primarily improves transfer time; aspects like interactivity (INP) or JavaScript execution time are not directly affected. For a complete performance picture, we recommend a combined view of all optimisation layers: server, frontend, images and caching strategies work together. If you want a comprehensive analysis, contact us about our technical performance analysis.