How to Optimize Website Images Without Visible Quality Loss

A 2400-pixel photo displayed at roughly 360 CSS pixels on a phone often creates unnecessary download cost. Good quality does not mean sending the largest file available. It means retaining the detail that matters at the displayed size.

Measure the display size first

Use browser tools to inspect the image width on phone and desktop layouts. If a mobile image is about 360 CSS pixels wide, a roughly 720-pixel file for a 2× density screen is a useful starting point. It is not a universal rule: crop, zoom, detail and image purpose matter. Keep the high-quality source and export separate delivery sizes.

Judge format and compression visually

WebP is often a good choice for photography and mockups. Compare several compression settings at final display size. Pick the smallest file that keeps important lettering, logo edges and shadows intact. Do not over-compress artwork containing fine print. For vector marks, SVG may remain sharper and lighter than a forced raster export.

Tell the browser about available sizes

When an image displays at different widths on mobile and desktop, srcset and sizes let the browser choose an appropriate file. This example uses nearly the full phone width and about half a desktop viewport:

<img src="cover-720.webp"
     srcset="cover-360.webp 360w, cover-720.webp 720w, cover-1200.webp 1200w"
     sizes="(min-width: 900px) 50vw, 94vw"
     width="1200" height="800" alt="Close-up of product packaging">

The width and height values reserve the aspect ratio before download and reduce layout shifts. Alternative text should communicate the image's meaningful content; a purely decorative image can use an empty alternative.

Prioritise the main visual

If the large image near the top is the page's main visual, keep it discoverable in HTML and avoid making it compete with unnecessary files. After changing assets, check which size the browser really downloaded in Network tools and whether the image was the page's largest contentful element. Compare results on a real device and network too.

Your short checklist: measure displayed dimensions, make suitable exports, inspect mobile cropping, verify srcset and sizes, and set dimensions and meaningful alternatives. The web.dev responsive-image guide provides more technical detail. For broader speed and architecture decisions, read our website redesign guide.