The useful image format is the smallest acceptable representation for the actual layout and browser, not a codec name in isolation.

One file, many layouts

Product cards, heroes and Open Graph images need different geometry. Query-string resize and crop beat a folder of hand-made widths that lags every new template.

Savings vary with source content, dimensions, encoder settings, and acceptable visual quality. Compare representative outputs rather than quoting a universal percentage.

The delivery model

How it works

WebP and AVIF CDN

  1. 01SizeMatch intrinsic dimensions to display size and density.
  2. 02EncodeCompare quality and bytes for representative images.
  3. 03DeliverNegotiate or select a compatible cached variant.
Conceptual model for this configuration. The actual path depends on provider policy and application behavior.

Cache the variant, purge the source

Derived representations can become separate cached objects. Review how source invalidation affects variants in the specific image pipeline; purging one URL does not universally purge every derived URL.

Versioned filenames skip purge entirely.

WordPress, Magento and DAM tools

The CMS or DAM remains the source of rights and originals. Cloud CDN is the output layer. You do not need to store WebP next to JPEG unless you already do.

LCP images first

Start with the LCP image on landing pages. A 4000 px JPEG as a 420 px hero is still the common failure, CDN or not.

Validate before production

Compare exported images at the rendered size, including detailed and transparent examples. Inspect the selected source in DevTools, verify format and Content-Type, and ensure Accept or URL-based variants cannot collide in cache.

  • Record the configuration and expected result before changing traffic.
  • Keep evidence of the test and a working rollback for the previous behavior.

Sources & further reading