Choosing the Right Image Format for the Web

Match the format to the content

The fundamental distinction is between photographic content and graphic content. Photographs contain continuous gradients and noise, which lossy compression handles brilliantly. Graphics contain flat areas and hard edges, which lossy compression destroys — producing the smeared halos around text that make a screenshot look cheap.

JPEG is the traditional choice for photographs and remains universally supported. PNG is lossless and handles transparency, making it correct for logos, screenshots and anything with sharp edges — but a photograph saved as PNG will typically be five to ten times larger than necessary.

SVG is a different category entirely: a vector format that describes shapes mathematically rather than storing pixels. For logos, icons and simple illustrations it is usually a fraction of the size of any raster equivalent and stays perfectly sharp at any resolution, including on high-density displays where raster images need two or three times the pixels.

• Photographs — JPEG, WebP or AVIF.
• Screenshots, logos, sharp-edged graphics — PNG or WebP lossless.
• Logos, icons, simple illustrations — SVG wherever possible.
• Anything needing transparency — PNG, WebP or AVIF, never JPEG.

WebP is the sensible default now

WebP supports both lossy and lossless compression plus transparency, which means it covers every case JPEG and PNG handle between them. At equivalent visual quality it typically produces files 25 to 35 percent smaller than JPEG, and often considerably smaller than PNG for graphics.

Browser support has been universal for several years, including Safari since version 14. There is no longer a meaningful compatibility argument against using it as your standard output format for the web.

AVIF goes further still, frequently achieving another 20 to 30 percent reduction over WebP. It is now supported in all major browsers, though encoding is noticeably slower and some older tooling still lacks support. Using AVIF with a WebP fallback via the picture element gives you the best of both.

Dimensions matter more than format

Before choosing a format, check the dimensions. The most common image performance problem by a wide margin is serving a 4000-pixel-wide photograph into a 400-pixel-wide slot, which wastes roughly 99 percent of the bytes downloaded regardless of how well the file is compressed.

Resize to the largest size the image will actually be displayed at, then double it only if you specifically need to serve high-density displays — and in that case use srcset so ordinary displays are not penalised for it.

This single change usually delivers a bigger improvement than any format switch. A correctly sized JPEG comfortably beats an oversized AVIF.

• Resize to display dimensions before compressing.
• Use srcset to serve appropriate sizes to different screens.
• Set explicit width and height attributes to prevent layout shift.
• Lazy-load images below the fold; never lazy-load the hero image.

Quality settings in practice

For lossy formats, quality between 75 and 85 is the practical sweet spot for photographs. Below 70, compression artefacts become visible in smooth gradients such as skies. Above 90, file size climbs steeply for a difference nobody can see at normal viewing distance.

Thumbnails tolerate more aggressive compression — 60 is often fine — because their small display size hides artefacts. Images intended for printing or further editing should stay at 90 or above, or be kept losslessly in the original.

Always keep the original file. Lossy compression is irreversible, and re-compressing an already-compressed image compounds the damage rather than replacing it. Work from the source each time you need a different size or format.