Magento 2 Image Optimisation and Next-Gen Formats

Images are the heaviest assets on any product page - usually 60-80 percent of page weight - and the cheapest performance win available. A Magento store shipping 2MB JPEG heroes is leaving conversion on the table every visit. Here is the optimisation stack, from quick wins to infrastructure.

The Format Ladder

• JPEG/PNG: the past - fine as fallback only
• WebP: universal support, ~30 percent smaller than JPEG at equivalent quality
• AVIF: another 20-40 percent below WebP, excellent support in current browsers

The delivery pattern is <picture> with format negotiation:

<picture>
  <source type="image/avif" srcset="product.avif">
  <source type="image/webp" srcset="product.webp">
  <img src="product.jpg" alt="..." width="800" height="800">
</picture>

Where Conversion Happens

Three architectural options, in increasing sophistication:

1. Build-time conversion: a module or CLI command generating WebP/AVIF variants alongside the originals in pub/media. Simple, works anywhere, but you manage the variant files

2. On-the-fly at the CDN: Fastly Image Optimizer (bundled with Adobe Commerce Cloud) converts and resizes at the edge from URL parameters - ?width=800&format=webp. Zero storage management, instant purging, the best option when available

3. Dedicated image CDN (Cloudflare Images, imgix, Cloudinary): same edge-conversion idea, platform-agnostic, often with art-direction and focal-point cropping

Sizing: The Multiplier Most Stores Miss

Format is half the story; dimensions are the other half. Serving a 2400px image into a 400px slot wastes 6x the bytes regardless of format:

• srcset/sizes delivering the right width per viewport
• Magento’s built-in resize (catalog product image resize and theme view.xml definitions) generates the sizes - define theme image dimensions accurately in etc/view.xml, it is the source of truth for storefront sizing
• Product images: standardise aspect ratio at upload (a mixed-ratio catalog fights every grid layout)

The Rest of the Checklist

• Lazy loading below the fold (loading="lazy" on everything except the LCP image)
• Preload the hero/LCP image - the one image you do NOT lazy-load
• Compression settings: quality 80-85 for WebP product imagery is visually indistinguishable from 100 at a third of the weight
• Cache headers: images are immutable content - long max-age with content-hashed or versioned URLs
• Alt text: not a performance item, but the same audit pass should catch missing alts - accessibility and image SEO ride along

A realistic outcome: 60-70 percent image weight reduction with zero visible quality change, cutting LCP by seconds on mobile. Few Magento performance projects pay back faster than the image pipeline.