Performance Required

Send small, modern images

Send AVIF or WebP images, each one sized for the screen it lands on with srcset and sizes, and always give width and height.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Export AVIF, WebP and JPEG at several widths. Serve them with <picture>, srcset and an honest sizes. Add a media source when phones should get a smaller file than srcset would pick for sharp screens. Always set width and height.

Example

<picture>
  <source media="(max-width: 600px)" type="image/avif" srcset="/assets/hero-768-f0c7bcf5bb.avif">
  <source type="image/avif" srcset="/assets/hero-768-f0c7bcf5bb.avif 768w, /hero-1536.avif 1536w" sizes="(max-width: 1200px) 100vw, 1200px">
  <source type="image/webp" srcset="/assets/hero-768-e9008a232a.webp 768w, /hero-1536.webp 1536w" sizes="(max-width: 1200px) 100vw, 1200px">
  <img src="/hero-1536.jpg" width="1536" height="1024" alt="Team at work">
</picture>

How to check

Lighthouse image audits pass. The network panel shows one image of the right size per device.

Measured

On a reference site, JPEG only (no AVIF, WebP or srcset) cost 0.45 s of mobile LCP and 73 KB. One large image for every screen cost 0.15 s. In an earlier lab, serving phones a 768 px AVIF through a media source showed the hero 100 ms sooner on 3× phones.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/image-optimization.