---
title: "Use modern image formats"
description: "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."
url: "https://seo-mcp.io/t/use-modern-image-formats"
---

# 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.

## Prerequisites

- An image pipeline or CDN that supports format conversion

## Steps

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.

## Source

@seo-mcp on 2026-10-19: https://web.dev/articles/uses-webp-images

Canonical: https://seo-mcp.io/t/use-modern-image-formats