Skip to main content

Optimize Images for a Fast Website — Full Workflow

3–5 minutes per image · For developers

An unoptimised hero image is the single most common cause of a poor LCP score. Designers export at 2× retina, photographers ship 12-megapixel JPEGs, and the result is a 2 MB image rendered at 600 px wide. Lighthouse flags it, mobile users wait, and your search ranking drops.

This four-step workflow turns any source image into a Core-Web-Vitals-friendly asset without uploading it to a third-party CDN tool. You resize to actual rendered dimensions, convert to WebP for the format payoff, compress with a quality slider, and finally strip EXIF metadata that bloats the file and leaks device info.

The 4-step workflow

  1. Image Resizer

    Resize to the actual rendered width (e.g. 1600 px for a hero, 800 px for an article inline).

    Why: Sending a 4000 px image to be rendered at 800 px wastes 75% of the bytes.

  2. Image Format Converter

    Convert JPG/PNG to WebP.

    Why: WebP is 25–35% smaller than JPG at equivalent visual quality and supported by all modern browsers.

  3. Image Compressor

    Compress with a quality slider until the live size readout hits your target (typically <100 KB for inline, <300 KB for hero).

    Why: A live preview lets you stop at the highest acceptable compression, not a guess.

  4. EXIF Data Remover

    Strip EXIF, GPS and camera metadata.

    Why: Saves a few KB and prevents leaking location, camera serial, and software version.

Every step runs in your browser — no upload, no signup.

When to use this workflow

  • Hero images on a marketing landing page targeting <2.5s LCP
  • Blog article inline images that need to load fast on 3G
  • OG/Twitter card images where the platform re-compresses anyway
  • Image-heavy product catalog pages on Shopify or WooCommerce

Frequently asked questions

WebP or AVIF — which should I use?

WebP is the safe universal default in 2026: ~96% browser support, smaller than JPG, and faster to encode than AVIF. AVIF wins on file size but encoding is much slower and Safari support only stabilised recently. Use WebP unless you have a specific reason to choose AVIF.

What quality setting is right?

For photos, 70–80% WebP quality is visually indistinguishable from the original on a typical screen. For UI screenshots and illustrations with text, stay at 85–90%. The compressor's live preview shows you the exact tradeoff per image.

Does stripping EXIF break anything?

No. EXIF is metadata the browser ignores when rendering. Removing it has no visual effect, saves bytes, and protects user privacy on uploads.

Related workflows