Use modern image formats

AVIF and WebP reduce image weight at equivalent quality, which speeds up LCP and lowers transfer cost. Serve them through picture with a fallback, convert at build time or at the edge, resize to the largest displayed dimension, and check the Content-Type and caching per format.

lowIn codeimpact effort

Why this matters

AVIF and WebP cut bytes at the same visual quality.

Get the full breakdown

The extended brief explains when this works, when it does not, and the trade-offs. Join the waitlist and it unlocks for every tip when sign-in opens; MCP access is the paid part.

Join the waitlist

Before you start

  • An image pipeline or CDN that supports format conversion

How to apply it

  1. Convert a sample and compare bytes General best practice

    Convert ten representative images to AVIF and WebP at the rendered size and compare file sizes and visual quality at 2x zoom.

    Check: Each converted file is smaller than the original at the same displayed dimensions.

  2. Serve with picture and fallback

    Emit source elements for AVIF and WebP plus an img fallback. Keep width and height attributes and the srcset variants.

    Check: The rendered picture element contains both format sources and an img fallback.

  3. Verify delivery and caching General best practice

    Check the Network panel for the selected format, the Content-Type header and a cache hit on the second load.

    Check: The response uses image/avif or image/webp and returns a cache HIT on reload.

Get the prompt for your agent

A ready-to-paste prompt for your agent that implements this tip and verifies the result in your repo.

Join the waitlist

Source: seo-mcp playbook · curated entry · report an error

Framework notes

astro

`<Picture>` from `astro:assets` emits AVIF and WebP sources with fallbacks when `formats` is configured.

nextjs-app

`next/image` negotiates AVIF and WebP from the Accept header when `images.formats` includes them in `next.config.ts`.

Official references

Let your agent apply this + 161 more tips.

Pre-order — $19