---
title: "Send small, modern images · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/image-optimization
updated: 2026-10-20
licence: "All rights reserved"
---

# Send small, modern images

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Send AVIF or WebP images, each one sized for the screen it lands on with `srcset` and `sizes`, and always give `width` and `height`.
- How: 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`. SVG icons and logos scale without loss, so they need no `srcset`.
- Check: Lighthouse `image-delivery-insight` passes (it replaced the separate image audits in Lighthouse 13). A browser test at 360 and 1280 px downloads one copy of each image. None is wider than twice its displayed width.
- 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.

Example:

```html
<picture>
  <source media="(max-width: 600px)" type="image/avif" srcset="/hero-768.avif">
  <source type="image/avif" srcset="/hero-768.avif 768w, /hero-1536.avif 1536w" sizes="(max-width: 1200px) 100vw, 1200px">
  <source type="image/webp" srcset="/hero-768.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>
```

**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`.

- Previous: [Measure speed in visitors' browsers](https://agentwranglers.se/playbook/website/performance/field-measurement)
- Next: [Load far-down images later](https://agentwranglers.se/playbook/website/performance/lazy-loading)
- [Performance](https://agentwranglers.se/playbook/website/performance)