Switching WebP to AVIF for product photos (without halos)

AVIF for product photos: the win (and where it breaks)

If you run ecommerce, moving product photos from WebP to AVIF can be a Core Web Vitals win—but only if your workflow is built for it. The “just export AVIF” approach is how you ship ugly cutout edges, wrong colors, and broken images for a chunk of browsers.

Here’s the practical version: AVIF usually buys you smaller files at the same visual quality, which is exactly what LCP cares about. But AVIF is also brutal on the mistakes we make in ecommerce pipelines: soft crop decisions, low-res masks, and lazy fallbacks.

I’m not going to re-teach what AVIF is. You’re here to ship faster product pages without wrecking your catalog.

AVIF vs WebP tradeoffs for product photos (real world)

• AVIF tends to win on photographic product images (fabric, skin, gradients) when you’re chasing smaller bytes at the same perceived quality.
• WebP can beat AVIF when you need fast, predictable encodes at scale, or when your images are already “simple” (flat color, hard edges, lots of empty background) and your AVIF settings aren’t dialed.
• PNG still matters as a working format (editing, compositing, masks). For delivery, it’s usually the wrong choice unless you truly need lossless and you’ve tested impact.

The artifact competitors rarely warn you about: AVIF makes haloing louder. When you remove a background and your mask is slightly off—1–2 pixels of fringe, semi-transparent spill from the old background—AVIF compression can exaggerate it. On white backgrounds it shows as a gray glow; on colored PDPs it becomes a dirty outline around the product.

Decision rule I actually use: if the product has thin geometry (jewelry, glasses, hair, lace) or you do heavy background removal, don’t default to AVIF. First pass: encode both AVIF and WebP from the same master, then do a 200% zoom check on edges and gradients. If AVIF introduces visible ringing/haloing at the file size you need, ship WebP for that SKU class.

Workflow mistakes that turn “smaller files” into worse images

A common ecommerce moment: you finally get lighter images, then customer support pings you with “why do these products look fuzzy?” It’s rarely AVIF itself. It’s the order you’re doing edits, and the kind of source you’re feeding the encoder.

Crop/resize timing: do it before compression. If you resize after you’ve already encoded AVIF, you’re resizing compression artifacts. Start from a high-quality master (PNG/TIFF/PSD), crop to the actual framing you want, resize to your real delivery sizes (e.g., 800px and 1600px), then encode AVIF/WebP from those resized masters. For a deeper pipeline view, use Image Optimization for Ecommerce: Crop, Background, Format First.

Background removal and cutout edges: treat the alpha as a product asset. If you remove background and export with transparency, test the edge on the exact PDP background colors you use (white, off-white, dark mode). AVIF can handle alpha, but the practical issue is mask quality: a sloppy matte looks “fine” in PNG and then looks dirty once you compress aggressively.

How AVIF amplifies haloing (what to fix):

• Fix spill: decontaminate edge colors (especially if the original background was saturated).
• Fix semi-transparent fringe: tighten the matte and feather intentionally (not accidentally).
• Fix sharpening: don’t sharpen after compression; sharpen the resized master lightly before encoding.

Color gotchas: ICC profiles and “why did my product shift?” Don’t assume your encoder and your CDN treat color the same way. Keep your masters in a consistent space (most ecommerce ends up in sRGB), and spot-check saturated products (red packaging, neon labels) across Chrome/Safari. If you don’t have time for deep color management, at least standardize inputs and avoid mixed-profile uploads.

Zero-broken-images migration: AVIF + WebP/JPEG fallbacks

Want the Core Web Vitals gain without waking up to broken thumbnails? Then don’t “switch to AVIF.” Add AVIF as the first choice, keep WebP as the second, and leave JPEG as the last-resort baseline.

Start with the boring truth: AVIF support is strong, but not universal across every environment your buyers use (older browsers, in-app webviews, embedded browsers). Your job is to make the upgrade invisible.

Step-by-step migration (no broken images):

1. Pick 20 representative SKUs: glossy (specular highlights), matte, gradients, thin edges (jewelry), transparent cutouts.
2. Generate a master per size: e.g., 800px and 1600px from the same edited source.
3. Encode AVIF + WebP + JPEG from the sized masters, using consistent quality targets.
4. Ship with a fallback stack (AVIF → WebP → JPEG) and validate on Chrome + Safari + Firefox, plus at least one Android webview.
5. Roll out by category: easiest first (t-shirts, shoes), hard last (hair, lace, glass).

Drop-in fallback markup (what I actually ship):

<picture>
  <source
    type="image/avif"
    srcset="/img/sku-123-800.avif 800w, /img/sku-123-1600.avif 1600w"
    sizes="(max-width: 768px) 800px, 1600px" />
  <source
    type="image/webp"
    srcset="/img/sku-123-800.webp 800w, /img/sku-123-1600.webp 1600w"
    sizes="(max-width: 768px) 800px, 1600px" />
  <img
    src="/img/sku-123-800.jpg"
    srcset="/img/sku-123-800.jpg 800w, /img/sku-123-1600.jpg 1600w"
    sizes="(max-width: 768px) 800px, 1600px"
    width="800" height="800"
    loading="lazy" decoding="async"
    alt="Black leather wallet" />
</picture>

Quality validation that doesn’t lie: do a 200% zoom check on (1) cutout edges, (2) fine text printed on packaging, and (3) smooth gradients. Then compare bytes. If you want a more systematic routine for “size down without quality loss,” see How to reduce image file sizes sem perder qualidade no e-commerce.

Practical rule for when WebP beats AVIF (actionable): if your AVIF version only wins by a tiny margin (single-digit %) but looks worse on edges or gradients at your target quality, keep WebP for that class of images. You’re optimizing buyer trust, not format purity.

AVIF tools, conversions, and the “next-gen format” reality check

Contrarian take: “next-gen images” isn’t one format. It’s a delivery strategy: modern formats (AVIF/WebP) plus sane fallbacks, tested like any other performance change.

Reality check: AVIF is worth it when it reduces bytes without making your products look worse. For ecommerce, that usually means you treat AVIF as an output format (delivery), not an editing format. Keep one clean master (PSD/TIFF/PNG), generate sized masters per breakpoint, then export AVIF/WebP/JPEG from those.

What software opens AVIF files? Browsers do. Some desktop tools do too, but for production work I don’t rely on “open AVIF and edit.” I rely on repeatable exports from the master so every SKU stays consistent.

How do I turn an AVIF file into a JPG? Export/convert to JPEG from your editor or converter. If the AVIF has transparency (alpha), JPEG can’t keep it—so it will flatten against a background color. That’s exactly where dirty edges and halos get worse if your cutout wasn’t clean.

Is AVIF higher quality than JPG? It can be at the same file size, especially for photos and gradients, but “higher quality” is not automatic. The only definition that matters here: does the product look clean at 100–200% zoom, and did you reduce bytes enough to move your LCP?

AVIF vs PNG vs JPEG XL (quick reality):

• AVIF vs PNG: PNG is great for working files and true lossless needs; AVIF is usually better for shipping photos and many cutouts, as long as your alpha edge is high quality.
• AVIF vs WebP: AVIF can win on size/quality, WebP can win on speed, predictability, and “good enough” output for simpler images.
• AVIF vs JPEG XL: JPEG XL is interesting, but your decision should follow support + tooling + your pipeline today. Don’t bet product photos on a format you can’t deploy safely across your real traffic.

If you’re tying image format changes to business outcomes (signup flow, ads landing pages, speed budgets), connect the performance work to a measurable page. This is the same logic we use in Signup form que converte: imagens leves (WebP/AVIF) + Core Web Vitals (ROI rápido).

FAQ

What format are next-gen images in for ecommerce?

For most ecommerce sites, “next-gen” means AVIF and WebP as primary delivery formats, with JPEG as a fallback. The right answer isn’t a single file type—it’s a stack that keeps pages fast without breaking images for unsupported browsers.

How do I convert PNG to AVIF without ruining cutout edges?

Start from a clean, high-res PNG (or PSD), finalize the cutout edge first, then resize to your actual delivery dimensions before encoding AVIF. After encoding, do a 200% zoom check on halos/ringing; if edges degrade at your target size, ship WebP for that image class.

WebP vs AVIF size: which is smaller for product photos?

Often AVIF, especially on photographic product shots with gradients and texture. But it’s not guaranteed: on simpler images (flat backgrounds, hard edges) or with conservative settings, WebP can match or beat AVIF—and it may encode faster in batch workflows.

What’s the safest fallback strategy for AVIF browser support gaps?

Serve AVIF first, then WebP, then JPEG. Keep a single “master” edit, generate per-size outputs, and validate on real browser mixes (Chrome, Safari, Firefox, plus an Android webview) before rolling out across the catalog.