The redesign moves all banners to AVIF — spectacular Lighthouse gain. Except the client's internal CRM still targets Safari 14 on corporate macOS: a lone <img src="hero.avif"> shows a gray box. Support says "site broken"; marketing says "modernization." Both are right within their scope.
WebP and AVIF cut weight without sacrificing perceived quality — if delivery stays progressive: best format for capable browsers, fallback for everyone else. Modernizing image format is not a checkbox; it is a delivery contract with your real audience.
Browser support and picture strategy
The <picture> element remains the most predictable approach on origin:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="630">
</picture>
| Format | Support | Note |
|---|---|---|
| AVIF | Recent Chrome, Firefox, Safari | Best compression ratio |
| WebP | Very broad | Intermediate fallback |
| JPEG | Universal | Final fallback |
Always set width and height on the img tag — this avoids layout shift (CLS). The alt attribute stays on the fallback image; crawlers and screen readers use it as last resort.
AVIF-only serving optimizes for Lighthouse while ignoring the real browser fleet — often B2B clients with high average order value.
CDN, Accept negotiation, and Vary
A CDN negotiating format via Accept: image/avif,image/webp,/ simplifies HTML — but requires Vary: Accept and a correct cache key. Without Vary, the CDN may serve AVIF to an incompatible browser.
On origin without CDN, <picture> stays more predictable than opaque server rewrite. Under WordPress, ShortPixel or Imagify plugins generate variants — verify fallback shows in admin preview and on old Safari.
Align this strategy with your cache headers: Accept-negotiated images need a consistent Vary policy between origin and edge.
Quality, dimensions, and srcset
Serve multiple resolutions via srcset and sizes for mobile. AVIF quality 50 often looks like JPEG 80 — tune per asset, not with one global setting.
Avoid upscaling: resize the source; do not compress a 4000 px file displayed at 400 px via CSS. Logos stay SVG — not AVIF.
For banners with different mobile/desktop crops, the media attribute on <source> enables art direction without duplicating the whole page.
Conversion pipeline: build or on-the-fly
Static build (Sharp, Squoosh, ImageMagick in CI) suits known assets: hero, icons, marketing visuals. Generate AVIF, WebP, and JPEG from a PNG or TIFF master. Name with hash + long Cache-Control.
On-the-fly conversion (imgproxy, Cloudflare Polish, dedicated image service) fits user uploads in e-commerce or CMS. Encode asynchronously — an upload must not wait thirty seconds for AVIF conversion. Cache the result aggressively.
Accessibility and image SEO
Descriptive alt stays on the fallback img. For decorative images, explicit alt="". Stable URLs and an image sitemap help indexing — Google reads WebP and AVIF, but JPEG fallback reassures conservative crawlers.
Do not drop JPEG "because nobody uses it" without measuring: analytics and server logs often reveal an underestimated legacy tail.
The peak: modern format, excluded audience
Here is what the Lighthouse score does not measure.
Good images = format negotiation plus fallback plus dimensions — not one MIME type forced on everyone.
Decide and move forward without blind spots
Before the next visual redesign:
- Implement
<picture>with AVIF, WebP, and JPEG fallback on hero visuals. - Configure
srcsetandsizesfor responsive — width/height on everyimg. - Choose static build or on-the-fly conversion based on image source (marketing vs CMS uploads).
- Verify Vary: Accept if CDN negotiates format — cross-check cache policy.
- Test on Safari 14, legacy Edge, and with JavaScript disabled: do hero images still show?
- Compare image CDN and hosting via the directory and compare tool.
For static assets, follow with HTTP/2: less weight per image multiplies multiplexing gains.
Frequently asked questions
AVIF or WebP first?
AVIF compresses better (often 20–50% smaller than WebP) but encodes slower with slightly newer support. WebP remains an excellent compromise. Serve AVIF first, WebP second, JPEG as fallback via <picture>.
How to serve the right format?
Via <picture> with <source type="image/avif"> and <source type="image/webp">, plus fallback <img src="...jpg">. Alternative: CDN negotiating Accept header — with Vary: Accept and adapted cache key.
What about image SEO?
Keep descriptive alt on fallback image, stable URLs, and an image sitemap. Google indexes WebP and AVIF; JPEG fallback reassures the most conservative crawlers.
Build-time or on-the-fly conversion?
Build for known marketing assets (CI + Sharp). Async on-the-fly conversion for CMS uploads — with aggressive cache on output. Never block a user request on slow AVIF encoding.
Modernizing format without fallback accepts gray boxes where business still counts.