Skip to content
TryImager

How to prepare images for a website: a practical checklist

Most site speed problems are image problems. A short, repeatable process fixes the majority of them before an image ever gets uploaded.

By Ranjith R, Creator & Developer of TryImagerPublished Last updated: 8 min read

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 full-bleed hero banner rarely needs to exceed 1920 × 1080 px; a blog body illustration rarely needs more than 1200 × 800 px; and a card thumbnail is often 600 × 400 px.

2. Choose format by content, not habit

ContentFormat
Photographs, hero images, product photosWEBP (JPG fallback if you must support very old browsers)
Logos, icons, illustrations with flat colourPNG or SVG if it's vector
Screenshots with text or UIPNG, or lossless WEBP if your pipeline supports it
Anything transparent and photographic (cut-outs)WEBP

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.

4. Protect Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS)

Preparing the image file is half the job; how you embed it in HTML determines whether it hurts Core Web Vitals. Always include explicit width and height attributes on the <img> tag so the browser reserves the exact aspect-ratio box before the bytes arrive, preventing layout shifts. Never put loading='lazy' on the main above-the-fold hero image — lazy-loading the LCP element delays painting until after layout completes. Instead, keep the hero image lean (ideally 80–160 KB in WebP) and use fetchpriority='high' on that single element.

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 via srcset; 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.
  • Set explicit width/height attributes and write real alt text before you publish.

Tools for this

Keep reading