Modern Image Formats for Ecommerce: WebP, AVIF, and JPEG XL in 2026

Image weight is the largest single component of payload on most ecommerce sites — typically 60-80% of total transferred bytes. Modern image formats (WebP, AVIF, JPEG XL) offer 25-50% better compression than JPEG at equivalent visual quality, which translates directly into faster LCP, lower CDN bandwidth costs, and lower mobile data usage for customers. Yet many stores still serve JPEGs exclusively in 2026.

The reason is partially historical (browser support concerns from 2018-2021) and partially logistical (Shopify and other platforms don't always default to modern formats). Both reasons are now obsolete. Here's the current state of modern image formats and the implementation pattern that works.

Format-by-Format State of Play

WebP — the default modern format

WebP has been universally supported since Safari added it in 2020. Browser support is now > 98% globally. Compression typically yields 25-35% smaller files than JPEG at equivalent quality.

WebP should be the default modern format for any ecommerce store in 2026. There is no scenario where serving a JPEG instead of a WebP makes sense, unless the JPEG was already smaller (rare).

Encoder choice matters: use libwebp with quality 75-85 for product photography. Lower quality is acceptable for hero/lifestyle images where artifacts are less visible.

AVIF — the 25-45% better format

AVIF reached useful browser support around 2024. Current global support is > 95% (Safari added support in version 16, Firefox in 93, Chrome and Edge much earlier). Compression yields 25-45% smaller files than WebP at equivalent quality — a substantial gain on top of WebP's improvement over JPEG.

AVIF tradeoffs:

• Encoding is 5-10x slower than WebP. Not a problem for static assets; can be a problem for on-the-fly resizing services
• Decoding is slightly slower than WebP — minor impact on low-end Android devices
• Color rendering occasionally differs subtly from source — rare but verify before bulk-converting brand assets

For ecommerce in 2026, AVIF is the right primary format with WebP fallback. Most modern image CDNs (Cloudinary, imgix, Bunny, Cloudflare Images) generate AVIF on the fly with automatic fallback for unsupported browsers.

JPEG XL — the format to watch

JPEG XL (JXL) offers comparable or better compression to AVIF with significantly faster encoding and progressive decoding. Browser support is the issue: Safari 17 added support in 2023, but Chrome dropped its experimental support in 2022 and has not re-added it as of 2026. Firefox is in similar limbo.

Practical recommendation for 2026: not yet primary. Monitor browser support. If Chrome re-adds support in 2026-2027, JXL becomes a strong candidate to replace AVIF for ecommerce.

HEIC — not for the web

HEIC is Apple's image format used for iPhone photos. Browser support is essentially Safari-only. It is not a web format. Convert HEIC source files to JPEG/WebP/AVIF for web use.

The Implementation Pattern

The HTML pattern that serves the best format to each browser:

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

Browsers select the first format they support. AVIF-capable browsers get AVIF. Older browsers fall back through WebP to JPEG. The <img> tag remains the fallback and the source of truth for alt text and dimensions.

For responsive images, add srcset with multiple sizes:

<picture>
  <source srcset="/img/product-400.avif 400w, /img/product-800.avif 800w, /img/product-1200.avif 1200w"
          type="image/avif"
          sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" />
  <source srcset="/img/product-400.webp 400w, /img/product-800.webp 800w, /img/product-1200.webp 1200w"
          type="image/webp"
          sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" />
  <img src="/img/product-800.jpg" alt="Blue running shoe"
       width="800" height="800" loading="lazy" />
</picture>

CDN-Based Auto-Conversion

Maintaining 3 formats × 4 sizes = 12 files per image is impractical at scale. Modern image CDNs solve this by generating formats on demand based on the Accept header. Major options:

• Cloudinary: f_auto,q_auto URL parameters auto-select format and quality. Pricing scales with bandwidth and transformation count
• imgix: auto=format,compress parameters; similar pricing model
• Bunny Optimizer: Cheaper alternative with similar capabilities
• Cloudflare Images: Flat-rate pricing; auto-format detection via Accept header
• Shopify's CDN: Supports WebP delivery automatically when client supports it; AVIF support added in 2024-2025

For most ecommerce stores, the right setup is:

1. Original high-quality images stored once (typically JPEG or PNG)
2. CDN handles format conversion and size variants on demand
3. Storefront uses image CDN URLs with format and size parameters

This eliminates the manual conversion burden while delivering optimal formats per request.

Platform-Specific Notes

Shopify

Shopify automatically serves WebP to compatible browsers via its CDN. AVIF support has been rolling out — verify by checking the response Content-Type when loading product images in Chrome (should be image/avif or image/webp, not image/jpeg).

To force the picture-element pattern with AVIF priority on Shopify, use Liquid's image_url filter with the format parameter:

{% raw %}{{ product.featured_image | image_url: width: 800, format: 'avif' }}{% endraw %}

WooCommerce

WordPress added native WebP support in 5.8. Plugins like ShortPixel, Smush, and Imagify add AVIF generation. For headless WooCommerce setups, use an external image CDN (Cloudinary, imgix) rather than processing images on the WP server.

BigCommerce

BigCommerce serves WebP automatically via Akamai Image Manager. AVIF support is configurable in Channel Settings → Image Manager.

Custom platforms

The picture-element pattern works on any platform. Pair with a CDN-based image service for format auto-selection.

Encoding Quality and Tradeoffs

For ecommerce product photography:

• AVIF quality 60-70: visually equivalent to JPEG quality 85, 35-45% smaller. Default for product images
• WebP quality 75-85: visually equivalent to JPEG quality 85, 25-35% smaller. Default for WebP fallback
• JPEG quality 75-85: ultimate fallback. Use mozjpeg encoder if available for 5-10% additional compression at no visual cost

For lifestyle/hero photography (less detail-critical):

• AVIF quality 50-60 is acceptable, 50-55% smaller than JPEG
• WebP quality 70-75, similar tradeoffs

Test by encoding a sample image at multiple quality levels and viewing side-by-side at the dimensions it will actually be displayed. Compression artifacts that are obvious at 4000px wide are invisible at 800px wide.

Verification

To verify modern formats are being served in production:

1. Chrome DevTools → Network tab → filter "Img"
2. Check Type column — should be "avif" or "webp" for most images, not "jpeg"
3. Check transferred sizes — should be 25-45% smaller than JPEG equivalents
4. Repeat on Safari, Firefox, mobile browsers to verify fallback chain works

Run a Lighthouse audit. The "Serve images in next-gen formats" opportunity should report 0 KB savings (i.e., already optimal). If Lighthouse flags savings, the implementation has gaps.

The Modern Image Format Checklist

1. Original images stored at high quality (JPEG or PNG, no pre-compression)
2. Storefront serves AVIF as primary format where supported
3. WebP fallback for AVIF-incompatible browsers
4. JPEG fallback for the rare browser without WebP support
5. <picture> element with <source> entries for each format
6. srcset with multiple sizes per format
7. sizes attribute set correctly for layout
8. loading="lazy" on below-the-fold images, omitted on LCP image
9. width and height attributes set to prevent CLS
10. Image CDN or platform-native format auto-conversion enabled
11. Hero/LCP image preloaded with imagesrcset and imagesizes

The compression difference between modern formats and legacy JPEG is one of the highest-leverage performance optimizations available to ecommerce stores: 25-45% bandwidth reduction with no visual quality loss, no UX changes, and (with a modern CDN) no operational complexity. StoreVitals scans detect images served in legacy formats, missing <picture> elements, and oversized image weights so the modern-format strategy stays consistently implemented as the catalog grows.