Exporting images for the web: size, format and quality

Every image on a page competes with the text for bandwidth. Getting the export right is the cheapest performance work available: no code, no build step, just three decisions that most people get wrong by default.

Decision one: dimensions

A 4000 px wide photo displayed at 800 px is four times heavier than it needs to be, and it will be decoded at full size on a phone before being scaled down.

Export at the size the layout actually renders, and add the density variants you need:

• One image at the CSS width for standard screens.
• A @2x variant for high-density displays, still at 2× CSS width — not 2× the original photo.
• Use srcset with sizes so the browser picks, instead of shipping the largest to everyone.

Rule of thumb: if an image is displayed at 720 px wide, 1440 px is the largest useful export.

Decision two: format

There is no single best format, only a best fit per image type:

Content	Best default	Why
Screenshots, UI, flat art, text	PNG or WebP lossless	Sharp edges, no ringing artefacts
Photographs	WebP or AVIF	25–50% smaller than JPEG at equal quality
Transparency over photos	WebP with alpha	PNG alpha is heavy, JPEG has none
Anything printed or archived	PNG or TIFF	Lossless, predictable

JPEG is still fine for photos where compatibility is the constraint, but WebP has been safe in every current browser for years and AVIF is now broadly supported. A <picture> element with AVIF → WebP → JPEG fallbacks costs nothing and covers old clients.

Decision three: quality

The quality slider is not a linear measure of “goodness”. Between 100 and 82 the file size roughly halves and almost nobody can see the difference in a side-by-side at 1:1 zoom. Below about 70, flat areas start to show blocking and text edges bloom.

Practical settings:

• Photographs: 80–85 for WebP/JPEG.
• Screenshots and UI: lossless, or 90+ if lossy is required.
• Everything: check the result at 100% zoom on a real background, not on white in a preview window.

The two mistakes that cost the most

Exporting transparency when the destination has a fixed background. A PNG with an alpha channel is larger than the same image flattened onto the page’s background colour. If you know the background, flatten it in.

Forgetting that the CSS can do the work. Gradients, shadows, rounded corners and simple shapes belong in CSS, not in a 300 KB PNG. The browser renders them for free and they stay crisp at any zoom.

A repeatable export pass

Before uploading anything, run this once per image:

1. Resize to the rendered CSS width (and a 2× variant if the design calls for it).
2. Pick the format from the table above; add a fallback chain if the format is new.
3. Set quality to 82 and look at the result at 100%.
4. Strip metadata you do not need — but keep the colour profile, as the colour guide explains.
5. Weigh the result. Over about 200 KB for a content image, go back to step 1.

The export step itself should not require a desktop application. In the PhotoPSD editor the document can be scaled, flattened and written out as PNG, JPEG or WebP; the PSD to PNG walkthrough shows the flattening part, and the format comparison goes deeper on codecs.