Optimising website images: format, size, loading time

The right format

JPEG: Photos, widely supported.
WebP and AVIF: Modern formats with smaller files at the same quality.
PNG: Graphics with transparency and sharp edges.
SVG: Logos and icons, scalable to any size.

The right size

An image should never be larger than the area in which it is displayed. A 4000-pixel photo in a 600-pixel slot wastes data. Use several sizes for different screens.

Compression

Moderate compression is usually not visible, but saves a lot of space. Check the result on screen.

Delayed loading

Images below the visible area can be loaded later (lazy loading). The main image at the top, by contrast, should load immediately.

In addition

Specify fixed dimensions so that the layout does not jump
Descriptive file names and alt text
Genuine photos rather than interchangeable stock photos, where possible

Practical example: slimming down a header image

Suppose the header image of a home page is a photo straight from the camera: 6000 pixels wide and several megabytes in size. It is displayed at a maximum width of around 1600 pixels. Step one: scale it down to the width needed. Step two: convert it to a modern format such as WebP or AVIF. Step three: compress moderately and compare the result on screen. As a rule, the file shrinks to a fraction of its size without the difference being noticeable. For smaller screens, also supply a narrower version, which the browser chooses itself.

Decision aid: which format when?

Photo with gradients: WebP or AVIF, with JPEG as a fallback.
Logo, pictogram, simple illustration: SVG, because it stays sharp and is tiny.
Screenshot with text and fine lines: PNG or lossless WebP, so that nothing looks blurred.
Photo with transparency: WebP or PNG, depending on file size.

Typical mistakes

Lazy loading for the main image: The topmost large image should load immediately. Delaying it usually worsens the perceived loading time, especially the “Largest Contentful Paint” value.
Compressing several times: Anyone who keeps re-saving a JPEG loses quality each time. Always work from the original.
Missing dimensions: Without width and height in the code, the text jumps as soon as the image has loaded.
Important information in the image: Opening hours or prices belong on the page as text, not in a photo.

Myth versus fact

Myth: The higher the resolution, the better it looks. Fact: Beyond the display size, extra resolution achieves nothing, except for very high-resolution screens, for which around twice the number of pixels can make sense. Beyond that, it only costs loading time.

Checking

In the browser’s developer tools, open the “Network” tab, filter by images and sort by size. Tackling the largest files first usually pays off most. Google’s measurement tools, as described under Core Web Vitals, are a useful addition.

A workflow for editorial work

So that the optimisation is not reinvented with every new article, a fixed workflow helps. Keep the original and never overwrite it. Scale down to the largest display width needed. Export to WebP or AVIF, and, if needed, a smaller version for mobile phones as well. Choose descriptive file names, for example “heizungsbau-stuttgart-team.webp” rather than “IMG_4821”. Write alt text that describes what can be seen. Finally, check the file size: for an image within the content, a few hundred kilobytes is often a sensible target, while a large header image may have more. These rules of thumb depend on the subject; what matters is the comparison on screen.