Your Images Are Still Too Heavy: The WebP and AVIF Moment

Open the waterfall chart of nearly any site we audit and the same fact presents itself first. Images are the heaviest asset class on the page, usually by multiples, and they have held that position through every era of the performance files.

Which makes this quarter’s news worth a dedicated post. The cheapest large win available in web performance right now is a format change. The browser-support threshold that blocked it for years has finally been crossed. And the Core Web Vitals countdown, June’s enforcement date, supplies exactly the deadline that gets deferred projects funded.

The specifics. WebP, the modern format tracked here since its early-2010s introduction, routinely delivers 25 to 35 percent savings over equivalent-quality JPEG. Safari’s adoption, as of last fall’s releases, removed the last major-browser objection to serving it broadly. AVIF, the newer format derived from the AV1 video codec, delivers further savings still. Depending on the image, AVIF can reduce file size substantially beyond JPEG, with the exact gain varying by content and encoder settings. It is landing in Chrome and Firefox now, with the caveats a young format earns, itemized below. For the image-rich sites we serve, this is the quarter’s highest-ROI performance project. The campuses, the health systems, the catalogs, the galleries. It is sitting in the media library, waiting. The adoption ladder follows, cheapest rung first.

Rung one: CDN-level format negotiation, the one-toggle win

The mechanism that makes this project cheap in 2021 where it was fiddly in 2014: content negotiation. Browsers declare which formats they accept on every image request. An image-aware CDN or media service can read that declaration and serve WebP to browsers that take it, AVIF to the vanguard, and JPEG to the stragglers. Automatically, from one source image, with no markup changes at all.

Readers with long memories will recognize this as the picture-element fallback machinery from the responsive-images wars of 2014, now operated for you at the edge. Same standards idea, zero template surgery.

The practical audit: most of the major CDNs and managed-hosting tiers this audience already runs offer this as a feature flag or a modest add-on. A meaningful share of sites are literally one toggle plus a check away from double-digit page-weight cuts across every image they serve.

On image-heavy templates, the reduction can be substantial enough to produce noticeable LCP gains on ordinary mobile connections. When the CDN handles format negotiation, the change is also quick to deploy and easy to reverse. When we say highest ROI, this rung is the math. The returns of a quarter-long optimization project at the cost of a change ticket. Start here. Most sites should also end here.

The rest of the ladder, and the AVIF caveats

• Rung two, convert at build time: for the controlled stacks (the static builds, the meta-framework tier) generating WebP and AVIF copies at build time with picture-element fallbacks keeps everything first-party and free of any one CDN. The tooling is mature, and the pattern is the 2014 markup doing its original job.

• Rung three, CMS-native support, arriving unevenly: the platforms are taking the feature in on their usual schedules. WordPress core WebP support is visibly coming, and the media plugins bridge meanwhile. The advice is the standard one: prefer the platform default when it lands, bridge with the established plugins until then, and avoid bespoke solutions the platform will obsolete within the year.

• AVIF’s honest caveats: encoding is heavy work for a computer. Batch conversion schedules matter at library scale, and on-the-fly encoding wants the CDN tier doing it. Progressive rendering is weaker than JPEG’s, so test your hero images on slow connections specifically. The toolchain is young. The house position: take AVIF where the CDN negotiates it automatically, lead with WebP where you manage formats yourself, and re-check annually.

• The habits that ride along free: the dimension attributes, the CLS insurance. The responsive srcset sizing, serving the size the viewport needs, still the larger win than format on many templates. The compression-quality audit, since the q-90 exports of 2016 hide in every library. Run them in the same pass. The project is touching every image anyway.

The deadline framing, for the budget meeting

The paragraph that gets this funded. June’s page-experience rollout will grade LCP in the field. LCP on image-led templates mostly comes down to image delivery. And image-led is most of them: the hero-image program page, the news article, the gallery. The format project moves exactly the numbers the ranking change will read, on exactly the timeline the announcement supplied.

The sites that run the project this quarter bank the user-experience gain now and enter June’s measurement window already improved. The sites that defer will rediscover this post in July via a Search Console report, which is also fine. The toggle will still be there, merely later than the scoreboard.

The usual advice on deadlines applies verbatim. The work was worth doing without one. The audience on median mobile connections has been paying the image tax for years. The deadline is simply the forcing function, and forcing functions are gifts to whoever reads them early.

Why this post exists

A format change may seem small against grander subjects. But the deepest recurring finding of our performance coverage is that the biggest wins are rarely exotic. The caching ladder. The script budget. The dimension attributes. And now a format toggle. Plain fixes at the heaviest layers, open to every site, put off everywhere because no deadline demanded them.

The formats sat mature enough for years. The support threshold crossed quietly last fall. The broader point is simple: revisit previously blocked performance improvements as browser support and platform capabilities change.

This belongs on an annual performance review list. The support threshold has crossed, and the early rollouts now being reported are the evidence. Run the audit on your own stack. The previously blocked wins pile up faster than anyone tracks, and the media library is the place to start this year. Thirty to fifty percent, one toggle, this quarter. The waterfall chart has been asking for years.