What Are Modern Image Formats (WebP & AVIF)? Complete Guide (2026)

Why Modern Image Formats Matter for Performance and SEO

Images are the single largest contributor to page weight on most sites — typically 40–55% of total bytes (HTTP Archive). That means image format choice has more leverage on perceived speed than almost any other optimization.

• Faster LCP: The hero image is the Largest Contentful Paint element on most marketing and article pages. Cutting its file size 30–50% directly reduces LCP, which is a Core Web Vital and a Google ranking signal.
• Lower total byte weight:Across a typical page, switching every JPEG to WebP saves 25–35% of image bytes. On a 3 MB page where 1.5 MB is images, that's ~450 KB shaved without touching code or copy.
• Lower bandwidth costs: CDN egress and origin bandwidth are billed by the byte. A 30% image reduction means a 30% lower image-bandwidth bill on every request.
• Better mobile experience: Mobile data plans and slow networks are where weight hurts most. Modern formats turn an unusable 4G page into a usable one.
• AI search visibility: AI answer engines preferentially cite pages that already rank well, and Core Web Vitals feed those rankings. Heavy images that drag LCP into the red also drag down AI citation odds.

WebP vs AVIF vs JPEG vs PNG: A Worked Example

Consider a typical 1600×900 hero photograph saved at perceptually equivalent quality across formats. The same source pixels — wildly different bytes on the wire:

Source: hero-1600x900.png  (lossless reference)

JPEG  (q=80)   ->  220 KB     baseline
PNG-8 (paletted) -> 480 KB    +118%   (truecolor PNG would be ~1.6 MB)
WebP  (q=80)   ->  150 KB     -32%    vs JPEG
AVIF  (q=55)   ->  105 KB     -52%    vs JPEG, -30% vs WebP

Audit triggers when (legacy_size - modern_size) > 8 KB.
Every legacy image above 25 KB is essentially guaranteed to flag.

AVIF's extra compression comes from the AV1 video codec — better intra-frame prediction, more efficient entropy coding, and support for 10/12-bit color depth. WebP, derived from the VP8 video codec, sits between JPEG and AVIF on both efficiency and encode speed.

How to Check Which Images Need Conversion

Modern-format coverage is measured by performance audits as a list of specific URLs that would save more than ~8 KB if converted. Don't guess — pull the list and convert them in priority order.

• Greadme's deep scan — surfaces every image flagged for modern-format conversion, ranked by potential byte savings, and pairs each with an AI-generated fix or one-click GitHub PR.
• Greadme's crawler scan — runs the modern-format audit across every indexable URL, so you can find which templates (product, listing, article) leak the most bytes.
• Greadme's AI visibility analyzer — checks whether image weight is dragging your LCP into a band that hurts both Google ranking and AI citation odds.
• web.dev performance audits — the "Serve images in next-gen formats" opportunity lists every offending URL and the exact KB saving per file.
• Chrome DevTools → Network panel — sort by Size, filter by Img, and you have your conversion backlog ranked by impact.

8 Proven Ways to Adopt Modern Image Formats

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="Mountain sunrise"
    width="1600"
    height="900"
    loading="eager"
    fetchpriority="high"
  />
</picture>

import sharp from 'sharp';

const input = sharp('hero.jpg');

await Promise.all([
  input.clone().avif({ quality: 55 }).toFile('hero.avif'),
  input.clone().webp({ quality: 80 }).toFile('hero.webp'),
  input.clone().jpeg({ quality: 80, mozjpeg: true }).toFile('hero.jpg'),
]);

<picture>
  <source
    type="image/avif"
    srcset="hero-480.avif 480w, hero-960.avif 960w, hero-1600.avif 1600w"
    sizes="(max-width: 600px) 100vw, 1600px"
  />
  <source
    type="image/webp"
    srcset="hero-480.webp 480w, hero-960.webp 960w, hero-1600.webp 1600w"
    sizes="(max-width: 600px) 100vw, 1600px"
  />
  <img
    src="hero-960.jpg"
    srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw, 1600px"
    alt="Mountain sunrise"
    width="1600"
    height="900"
  />
</picture>

.hero {
  background-image: image-set(
    "hero.avif" type("image/avif"),
    "hero.webp" type("image/webp"),
    "hero.jpg"  type("image/jpeg")
  );
}

Common Modern-Format Pitfalls and Fixes

Format Comparison: When to Use Each

FAQ

Should I use WebP or AVIF?

Use both, with <picture>. Browsers that support AVIF (~95% as of 2026) will pick it for the largest savings; the rest fall back to WebP (~97% support); the long-tail 2–3% get JPEG. You don't pick one — you serve the best one each browser can handle.

Is WebP actually safe to use without a JPEG fallback?

For most consumer audiences, yes — WebP support is at 97%+ in 2026. But the <picture> + JPEG fallback adds almost no engineering cost and protects the long tail (older devices, niche browsers, embedded webviews). Keep the fallback.

Will modern image formats hurt SEO or image search rankings?

No. Google indexes WebP and AVIF directly and has done so for years. The performance gains (lower LCP, lower page weight) actually help rankings via Core Web Vitals. Make sure alt text and surrounding context still describe the image clearly.

What about animated GIFs — should I convert those too?

Yes, urgently. Animated GIFs are typically 5–10× larger than the equivalent animated WebP, and 10–20× larger than an MP4 or WebM video at equivalent quality. For anything over a few seconds, use <video autoplay muted loop playsinline> with an MP4/WebM source.

Do I need to keep the original JPEG/PNG masters?

Yes. Always keep the lossless or highest-quality original — re-encoding from a lossy WebP/AVIF compounds compression artifacts. The master JPEG/PNG (or ideally the source RAW/PSD) is the input to every future format you might generate.

Do AI search engines like ChatGPT and Perplexity care about image formats?

Not directly — they cite text. But AI answer engines disproportionately cite pages that rank well in traditional search, and Core Web Vitals (especially LCP, which is image-driven on most pages) feed those rankings. Heavy images hurt LCP, which hurts rank, which hurts your citation odds in AI Overviews and Perplexity. The chain is real even if it's indirect.

How much disk and CDN storage do multi-format variants cost?

Roughly 1.5–1.8× the original storage when you keep AVIF + WebP + JPEG variants. That's usually trivial compared to the bandwidth saved on every request — most sites recoup the storage cost within their first month of bandwidth bills.