AVIF vs WebP vs JPEG: Which Image Format Should You Use?

Last updated: June 27, 2026

Pick the smallest format your audience and delivery channels can display. For most modern sites that means testing AVIF first, retaining WebP as a broadly compatible fallback, and keeping JPEG where older clients or external systems require it. The file-size table below is one illustrative encode of the same 1600×900 photograph, not a universal savings guarantee.

Quick answer: AVIF, WebP, or JPEG?

Test AVIF as the primary format, serve WebP as a fallback, and keep JPEG for places modern formats cannot go (some email clients, legacy software, and partner feeds). AVIF often compresses photographs more efficiently, while the actual saving depends on the source image, encoder, settings, and quality metric.

A practical decision rule:

Situation	Use	Why
Modern web pages, product photos, hero images	AVIF (+ WebP fallback)	Smallest bytes, best Core Web Vitals
Wide compatibility with one file, simple CMS	WebP	Native support in current major browsers and efficient compression
Email, RSS, old intranets, broken CMS pipelines	JPEG	Decodes everywhere, no negotiation
Sharp UI screenshots, text, line art	PNG or WebP (lossless)	JPEG and AVIF blur thin edges at low quality
Animations on a page	AVIF or animated WebP	Replaces GIF at a fraction of the size

If your build pipeline cannot emit AVIF yet, switch to WebP first. It is the fastest single win, and you can layer AVIF on top later without changing the <img> markup.

What can the size difference look like?

The following 1600×900 feather-detail photograph illustrates one set of encoder outputs. Treat the numbers as an example to reproduce on your own images, not as a promised site-wide percentage:

Format	Quality setting	Measured file size	Vs JPEG
JPEG	85	222 KB	baseline
WebP	85	171 KB	−23%
AVIF	70	130 KB	−41%

The result can change with image content and encoder settings. Noisy photographs, flat graphics, screenshots, and white-background product shots have different compression curves, so compare formats at an acceptable visual quality on a representative sample.

For a store with hundreds of product photos, even a modest per-image reduction can materially reduce transferred bytes. Measure the aggregate saving before adding another format to the build pipeline.

Does the smaller AVIF file actually look as good?

This is the question that matters, and the reason "AVIF is 40% smaller" is not the whole story. At sensible quality settings the answer is yes for photographs — and you can verify it on the same test image by zooming in:

At matched quality the differences are hard to see at normal viewing distance. The artifacts that do appear, when you push quality too low, are format-specific:

Format	Failure mode when over-compressed	Where it shows first
JPEG	8×8 blocking, ringing around edges	Skin tones, text, feather/fine detail
WebP (lossy)	Similar to JPEG but slightly cleaner at equal size	Same high-frequency areas
AVIF	Smooth smearing of fine texture, "plastic" look	Fur, foliage, film grain

The practical lesson: keep AVIF in the 60–70 quality range for photographs. Below ~30, AVIF smears detail in a way that looks worse than a larger JPEG, because the human eye reads texture loss as "wrong" faster than it reads JPEG ringing.

How does each format compare on the dimensions that matter?

Dimension	JPEG	WebP	AVIF
Year introduced	1992	2010	2019
Max compression	Lowest	Medium	Highest
Lossless support	No	Yes	Yes
Alpha (transparency)	No	Yes	Yes
HDR / wide gamut	No	Limited	Yes
Encoding speed	Fast	Fast (2–5× AVIF)	Slow
Compatibility	Broadest, including legacy systems	Current major browsers	Current major browsers; check external pipelines
Best for	Compatibility, email	General web	Photos, hero images

Two trade-offs drive every format choice: AVIF costs more CPU to encode, and JPEG is the only format guaranteed to render in every mail client and legacy system. If you batch-encode once at upload time, the encoding cost is irrelevant. If you generate formats on the fly on every request, WebP's faster encoding matters.

When should you still pick JPEG?

JPEG is not obsolete — it is the universal fallback. Keep it for:

• HTML email. Most email clients strip or ignore WebP and AVIF. JPEG and PNG still rule here.
• Partner and marketplace feeds. Some product feeds, ad networks, and print pipelines only accept JPEG.
• Old embedded browsers (older Smart TVs, kiosks, e-readers) that predate WebP support.
• Small, already-optimized thumbnails where re-encoding to AVIF saves single-digit kilobytes and is not worth the pipeline complexity.

How do you serve all three without breaking old browsers?

Use the <picture> element with typed sources. The browser picks the first type it supports and ignores the rest.

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

Notes that matter in practice:

• Always keep a real <img> with a JPEG src as the final fallback.
• Set width and height on the <img> to prevent layout shift — this applies to every format.
• Lazy-load below-the-fold images; do not lazy-load the LCP hero.
• If you use next/image, it negotiates formats automatically when the loader and remote patterns are configured. This site's next.config.ts already allow-lists the CDN host.

How does format choice affect Core Web Vitals?

Images most often control Largest Contentful Paint (LCP) on image-heavy pages. Smaller bytes mean the hero image arrives and paints sooner. Field results track the file-size ratio closely:

Format	Relative LCP	Notes
JPEG	Baseline	Largest bytes, slowest paint
WebP	~20% faster	Good middle ground
AVIF	~35% faster	Best when the hero is a photo

Cumulative Layout Shift (CLS) is format-independent. It depends on whether you reserve space with width/height, not on whether the bytes are JPEG or AVIF. A badly-sized AVIF shifts the page just as much as a badly-sized JPEG.

Read Google's official guidance on images and Core Web Vitals and the image format reference for the current per-browser decoder support.

AVIF drawbacks worth knowing before you switch

AVIF is the right default for new work, but it has real rough edges:

• Encoding is slow. Single-threaded AVIF encoding can be 2–5× slower than WebP. Encode once at upload, not on every request.
• Older Safari (<16.0) and some embedded WebViews do not decode it. The <picture> fallback covers this.
• A few editors and DAM tools still cannot open AVIF. Keep a JPEG or PNG master.
• Very aggressive AVIF settings (quality < 30) smear detail. Stay in the 60–70 range for photos, as the zoom comparison above shows.

If any of these block your team, start with WebP. It removes the rough edges and still beats JPEG by ~23%.

A simple rollout order

1. Measure first. Run PageSpeed Insights on your top templates and note image bytes and LCP.
2. Add WebP as a fallback behind JPEG — quick win, no compatibility risk.
3. Add AVIF sources above WebP in <picture> for photographs.
4. Compress and resize every image to its display size before encoding. Use the Imagic AI Image Compressor and Image Converter for one-off or batch jobs.
5. Reserve dimensions (width/height) on every image to lock CLS.
6. Re-measure. Confirm LCP dropped and no image requests 404.

Common mistakes

• Serving one giant AVIF and skipping resize. Format does not save you from a 4000px image shown at 400px. Resize first, then encode.
• Lazy-loading the hero. The LCP image should load eagerly with fetchpriority="high", not lazily.
• Forgetting the <img> fallback. A <picture> with only <source> tags and no <img> renders nothing on unsupported clients.
• Comparing formats at the same quality number. AVIF q70, WebP q85, and JPEG q90 look roughly similar. Compare at matched visual quality, not matched numbers — that is exactly how the measurements above were taken.
• Pushing AVIF quality too low. Below ~30, AVIF's texture smearing looks worse than a larger JPEG.

Related guides

• Compress Images Without Losing Quality
• How Image Compression Works
• Image SEO Optimization Checklist
• Complete Image Optimization Checklist
• TinyPNG Alternatives Compared

Frequently asked questions

Is AVIF always smaller than WebP?

Not always; AVIF usually compresses photographs harder than WebP at matched visual quality, but flat graphics and screenshots can favor WebP or PNG depending on content.

How much smaller was AVIF than JPEG in this test?

In the measured encode above, AVIF q70 was 130 KB against a JPEG q85 baseline of 222 KB, a 41% reduction on that single image.

Do all browsers support AVIF?

Current major browsers decode AVIF, but older Safari below version 16 and some embedded WebViews do not, so a <picture> fallback to WebP or JPEG is still required.

Is WebP safe to use as the only format?

Yes; WebP has native support in current major browsers and beats JPEG by roughly 23% in the measured comparison above, making it a solid single-format choice if you cannot add AVIF yet.

When should I still use JPEG instead of AVIF or WebP?

Keep JPEG for HTML email, partner and marketplace feeds, and older embedded browsers that predate WebP and AVIF support.

Does AVIF take longer to encode than WebP?

Yes; single-threaded AVIF encoding can run 2-5x slower than WebP, which matters most if you encode on every request rather than once at upload.

What AVIF quality setting keeps photos looking sharp?

Stay in the 60-70 quality range for photographs, since AVIF below roughly 30 starts smearing fine texture in a way that looks worse than a larger JPEG.

Which format should I pick for a hero image?

Pick AVIF with a WebP fallback and a JPEG <img> base for hero images, since smaller bytes there directly speed up Largest Contentful Paint.

Image credits

• Cover — Photographer editing photos on a laptop with a DSLR and tablet, photo by cottonbro studio on Pexels (converted to WebP).
• Format comparison, file-size chart, and artifact zoom — generated by the author from a macaw-feather photograph (Pexels #36720663, photo by Kaca Skok) to show real measured JPEG / WebP / AVIF output at matched quality.