How to prepare images for a website (a checklist that actually gets used)

Unoptimised images are the single most common cause of slow-loading web pages, and the fix rarely needs a build pipeline — it needs the same handful of steps applied every time an image goes on the site. This is that checklist.

1. Resize to the actual display size

Find the widest the image will ever render at on the page — check the design or the CSS, don't guess — and resize to that width (plus roughly 1.5–2x if you explicitly serve high-density displays). A hero banner rarely needs to be wider than 1920px; a blog body image rarely needs more than 1200px; a card thumbnail is often 400–600px.

2. Choose format by content, not habit

3. Compress with a visible target

Quality 75–85 for JPG or WEBP covers almost every web use case without visible loss at normal viewing distance. Push it as low as it will go while still looking right at full size — not in a shrunk browser preview, where artefacts hide.

Things that get forgotten

• Alt text — write a real description of the image, not the filename. It matters for accessibility and for search.
• Consistent aspect ratios within a grid or gallery — mismatched ratios cause layout shift as images load.
• Filenames — descriptive, hyphenated filenames help far more than people expect and cost nothing to fix before upload.
• Retina assets — only serve 2x images if you're actually requesting them conditionally; otherwise you're doubling weight for no benefit on standard screens.

The five-minute version

• Crop out anything the image doesn't need.
• Resize to the real display width.
• Convert to WEBP (keep a JPG fallback only if you need it).
• Compress at quality 80, check the result at full size.
• Write real alt text before you upload.