Image Formats for Ecommerce in 2026: AVIF vs WebP vs JPEG XL

Product photography is usually the heaviest single asset on an ecommerce page. A hero image at 1600×1200 saved as a quality-80 JPEG is 250–400 KB. The same image as AVIF is 80–130 KB. Across an entire product gallery, a single Shopify collection page can shed 1.5–3 MB by switching formats — moving from "Needs Improvement" to "Good" on mobile LCP without any other change. The question isn't whether to adopt modern formats; it's which ones, in what priority order, with what fallback strategy.

The 2026 Browser Support Reality

Format	Chrome	Safari	Firefox	Edge	Global support
JPEG/PNG	Yes	Yes	Yes	Yes	100%
WebP	Yes (2010+)	Yes (14+, 2020)	Yes (65+, 2019)	Yes	~98%
AVIF	Yes (85+, 2020)	Yes (16.4+, 2023)	Yes (113+, 2023)	Yes (121+)	~95%
JPEG XL	No (removed 2023)	Yes (17+, 2023)	Partial (behind flag)	No	~20% (Safari only)

The headline: WebP and AVIF are both safe defaults in 2026. JPEG XL has the best compression of the three but lost the browser support war when Chrome removed it in 2023 — it's a Safari-only optimization, and the small CDNs supporting it (Cloudflare Images, KeyCDN, imgix) are the only practical paths to using it.

File Size Comparison (Real Product Image)

1600×1200 product photo (running shoes on white background), original 4.2 MB TIFF:

Format	Quality 90	Quality 80	Quality 70	Visual
JPEG	520 KB	320 KB	210 KB	Reference
PNG (lossless)	1.4 MB	—	—	Lossless
WebP	340 KB	210 KB	140 KB	Indistinguishable from JPEG
AVIF	180 KB	110 KB	78 KB	Indistinguishable from JPEG; better at high compression
JPEG XL	160 KB	95 KB	68 KB	Slightly better than AVIF at low quality

The pattern: AVIF is roughly 60–70% smaller than JPEG at equivalent visual quality. WebP is roughly 30–40% smaller. JPEG XL is marginally better than AVIF where supported.

Where Each Format Wins

AVIF wins for: hero images, product photography, marketing imagery

AVIF excels at photographic content with smooth gradients (product photos, lifestyle imagery, food photography). It handles HDR well and supports wide color gamuts. The compression advantage is largest at lower quality settings — meaning AVIF preserves usable quality at lower bitrates than WebP can.

WebP wins for: small UI elements, broad compatibility, encoding speed

WebP encodes 5–10× faster than AVIF, which matters for stores generating thousands of variants on the fly. For small product thumbnails (200×200 to 400×400), the byte savings of AVIF over WebP are minimal (10–20 KB per image), while WebP's broader browser support and faster encoding tilts the equation. WebP is also better for images with text overlays or sharp edges, where AVIF's compression can introduce subtle artifacts.

JPEG XL wins for: photographic content where Safari is your primary audience

For luxury fashion, food, and lifestyle brands with a heavy iPhone/iPad audience, serving JPEG XL to Safari is a measurable LCP win. For everyone else, the implementation overhead (CDN selection, encoding pipeline) usually doesn't justify the savings.

PNG still wins for: logos, icons, screenshots with text

WebP and AVIF have lossy modes (default) and lossless modes (rarely used). PNG remains the right format for true-lossless needs — logos with crisp edges, screenshots with text, transparent UI elements where compression artifacts are visible.

The Picture-Element Delivery Pattern

The defensible 2026 implementation pattern serves AVIF to browsers that support it, WebP as a fallback, and JPEG as the universal floor:

<picture>
  <source type="image/avif" srcset="/shoe-1600.avif 1600w, /shoe-800.avif 800w" sizes="(min-width: 768px) 50vw, 100vw">
  <source type="image/webp" srcset="/shoe-1600.webp 1600w, /shoe-800.webp 800w" sizes="(min-width: 768px) 50vw, 100vw">
  <img
    src="/shoe-1600.jpg"
    srcset="/shoe-1600.jpg 1600w, /shoe-800.jpg 800w"
    sizes="(min-width: 768px) 50vw, 100vw"
    alt="Trail Running Shoes - Side View"
    width="1600"
    height="1200"
    loading="eager"
    fetchpriority="high"
  />
</picture>

The browser picks the first source it supports. AVIF browsers get AVIF, older browsers fall through to WebP, ancient browsers get JPEG. Width and height attributes prevent layout shift. The eager + fetchpriority="high" combo is critical for hero images — without them, modern browsers may deprioritize image loading and tank LCP.

Platform-Specific Implementation

Shopify

Shopify's CDN serves WebP automatically when you use the image_url filter — no manual conversion needed. As of 2025, the Shopify CDN added AVIF auto-serving for compatible browsers (look for the format: 'avif' filter or the auto-format behavior). Most Dawn-derived themes already use the right tags. If you're on an older theme, replace {{ image | img_url: '800x' }} with {{ image | image_url: width: 800, format: 'auto' }} for format negotiation.

Next.js (App Router)

The next/image component auto-serves WebP and AVIF when configured. In next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

Next.js's image optimization runs on Vercel's edge or your origin — both can serve AVIF correctly. Watch for the cost: heavy image traffic on Vercel can be expensive without proper caching.

WooCommerce / WordPress

WordPress 6.5+ auto-serves WebP from JPEG uploads. AVIF is not yet automatic; use Cloudflare Images, Bunny CDN, or imgix to convert on the fly. Plugins like ShortPixel or Imagify generate AVIF/WebP versions on upload.

BigCommerce

BigCommerce's Akamai CDN auto-serves WebP and AVIF when browsers support them. No theme changes required.

The CDN Layer Matters More Than the Origin Format

Most modern image CDNs (Cloudflare Images, imgix, Bunny.net, KeyCDN, Cloudinary) handle format negotiation automatically — you upload a single original (JPEG, PNG, or TIFF) and the CDN serves AVIF/WebP/JPEG/JPEG-XL per request based on the Accept header. This is the easiest path to modern formats for stores not on a platform that handles it natively.

Approximate pricing for 1TB/mo of image delivery in 2026:

• Cloudflare Images: $5/100k images stored + $1/100k delivered. Modest pricing for small-to-mid stores.
• imgix: $0.06/GB. Premium pricing, premium transformation features.
• Bunny.net: $0.005–$0.04/GB depending on region. Cheapest option for high-volume delivery.
• Cloudinary: $0.03–$0.15/GB depending on plan. Most feature-rich, most expensive.

Common Mistakes in Format Migrations

1. Forgetting the JPEG fallback — some headless CMSes generate only WebP/AVIF, breaking Safari 14 and lower (still 1–2% of traffic in 2026)
2. Missing width/height attributes — modern formats don't fix CLS; explicit dimensions still required
3. Using AVIF for tiny thumbnails — at 100×100, the AVIF advantage over WebP is 1–3 KB, not worth the encoding cost
4. Cranking AVIF quality too high — AVIF at quality 90+ is rarely visibly different from quality 70; you're shipping 50–80% more bytes for no perceptible gain
5. Serving AVIF without testing — early-2023 AVIF encoders had quality issues; modern encoders (libavif 1.0+) are reliable, but verify visually on actual product images before rolling out
6. Lazy-loading the LCP image — a modern format won't save an LCP image that's marked loading="lazy"; eager + fetchpriority="high" is mandatory for above-fold images

Measuring the Impact

Before migrating, baseline your current state:

• Run PageSpeed Insights on 5 representative product/collection/home pages — note current LCP and total image weight
• Check Network tab in Chrome DevTools for any product page — identify the LCP image and its current format/size
• Use Cloudflare Radar or Lighthouse to confirm what visitors actually receive (not what you uploaded)

After migrating, re-baseline. Typical results on an ecommerce store moving from JPEG/PNG to AVIF/WebP with picture element:

• LCP improvement: 300–800ms on mobile, 100–300ms on desktop
• Total page weight: -40 to -65% on image-heavy pages
• Bandwidth costs: -30 to -50% on CDN bills (for stores not using a flat-rate CDN)
• Mobile LCP threshold compliance: stores in the 2.5–4.0s range typically drop into the "Good" (<2.5s) bucket

The Honest Verdict for 2026

For most ecommerce stores: serve AVIF as primary, WebP as fallback, JPEG as floor — via picture element if you control HTML, or via CDN auto-negotiation if you don't. Skip JPEG XL unless your audience skews heavily Safari and you're already on a CDN that supports it.

For Shopify, BigCommerce, modern Next.js: ensure format auto-negotiation is enabled in platform settings; check your theme generates the right tags.

For WordPress/WooCommerce, Magento, headless builds: route image delivery through an image CDN (Cloudflare Images, Bunny, imgix) and let it handle format negotiation per request.

Run a StoreVitals scan to see what image formats your store currently serves, identify the specific images that are largest contributors to LCP, and quantify the byte savings from a format migration.