Smaller Files, Clearer Pixels: Picking Web Image Formats for UK Sites in 2026

Ask a room of web designers about image formats and you will get an argument. Ask a small business owner and you will usually get a blank look. In 2026 the practical answer is less dramatic than the debate suggests: AVIF, WebP and JPEG can all work well, and the format you choose matters less than the size you serve, the quality you set and the device you test on.

That is the useful lens for ClearPixel readers. A web image is not clear because it has a fashionable file extension. It is clear because it has enough pixels for the screen, sensible compression and a colour profile that does not make everyone look faintly unwell.

The short version

AVIF usually gives the smallest file for photographs, and it supports transparency and wide colour. WebP is a good all-rounder with broad support and decent compression. JPEG is the dependable old fallback that every browser and email client understands. None of them can rescue an image that has been exported at the wrong size or squeezed until the detail turns to mush.

What each format does well

JPEG is still fine for photographic content. It is predictable, universally supported and easy to produce from any camera or editing app. Its weaknesses are familiar: no transparency and visible blockiness around high-contrast edges if you push compression too far.

WebP handles transparency and can produce smaller files than JPEG at similar quality. It is a sensible default for many content images, especially when you want one format that works across modern browsers without much fuss.

AVIF is the compression overachiever. It can make photos noticeably smaller, and it handles gradients and fine detail well at sensible quality settings. The catch is that aggressive AVIF can soften texture, and older devices may decode it more slowly. A small file that takes too long to unpack on a budget Android phone is not automatically a win.

Where compression artefacts show up

Do not judge an image by zooming to 400 per cent on a colour-calibrated desktop monitor. Judge it at the size it will appear on a phone, a laptop and a tablet. Look at the places where compression tends to show: pale skies, smooth skin, dark suits, brickwork, foliage, subtle gradients and any text baked into the image.

JPEG tends to show blocking around sharp edges. WebP can smear low-contrast detail and create odd halos. AVIF can look beautifully smooth in one area and slightly plastic in another if the quality setting is too low. If an image contains important words, use HTML text rather than a picture of text. It will stay sharp, selectable and accessible.

Responsive sizing beats format wars

The most common image problem on small business sites is not the format. It is sending a 2400-pixel hero image to a 390-pixel phone. Use responsive images with srcset and sizes, and provide a picture element with AVIF, WebP and JPEG fallbacks where it makes sense.

<picture>
  <source srcset='hero.avif' type='image/avif'>
  <source srcset='hero.webp' type='image/webp'>
  <img src='hero.jpg' alt='Team working in a UK studio' width='1200' height='800' loading='lazy'>
</picture>

Set width and height to avoid layout jumps, lazy-load images below the fold and keep the largest contentful paint image lean. A beautifully compressed image that arrives late is still a bad experience.

Colour profiles and perceived sharpness

Most UK websites should stay in sRGB. It is the safe common ground for browsers, phones and laptops. If you export in Display P3 without a proper workflow, colours can look dull on some screens and radioactive on others. Convert deliberately, and check the result on more than one device.

Over-sharpening is another quiet problem. A little sharpening can make a downscaled photo feel crisp, but too much creates halos around edges. Browsers will scale images anyway, so give them a clean source rather than a crunchy one.

Test on a bad connection, not office fibre

Your office fibre connection is not representative of a rural broadband line, a busy 4G cell or a train journey through a tunnel. Throttle the connection in browser developer tools, then test on a real phone. Check the total image weight, how quickly the main image appears and whether the page feels stable while it loads.

Use Lighthouse as a rough guide, not a final verdict. A real device test will tell you more about decode speed and perceived sharpness than a perfect score on a fast desktop.

A simple workflow for small UK sites

1. Start with a clean source image and export at the largest size you will actually display.
2. Create a few widths, such as 400, 800, 1200 and 1600 pixels, rather than one enormous file.
3. Try AVIF at a moderate quality, WebP as a fallback and JPEG for older support.
4. Compare files at actual display size, not at extreme zoom.
5. Use responsive markup and test on a throttled connection and a real phone.
6. Keep logos as SVG and avoid baking text into photographs.

The best format is the one that looks clear on your customers' screens and arrives quickly on the connections they actually use. In 2026 that still requires judgement, not just a file extension.