AVIF vs WebP: which image format should your website use?

Q: Should I still keep JPG files?

Keep the originals, and serve JPG as the last fallback in . Some email clients and older tools still need JPG.

ComparisonsUpdated 29 October 20263 min read

Short answer: both are much smaller than JPG. AVIF usually gives the smallest files at the same visual quality, especially for photos, but it's slower to create. WebP is quicker to make and works everywhere. A safe setup is AVIF first, WebP as a fallback and JPG as the last resort, all in one <picture> element.

Side by side

	AVIF	WebP
Typical size vs JPG	Often around half	Often 25–35% smaller
Best at	Photos, gradients, low bitrates	Photos and graphics, all-round
Transparency	Yes	Yes
Animation	Yes	Yes
HDR and wide colour	Yes	No
Browser support	All current major browsers (Safari since 16.4)	All current major browsers
Encoding speed	Slow	Fast
Editing support	Growing, still patchy in older apps	Wide

The size figures are typical, not guaranteed. Results depend on the image and the quality setting.

When to choose AVIF

Large hero images and photo galleries. This is where the extra savings show most.
Smooth gradients and skies. AVIF shows less banding at small sizes.
Pages where speed matters most, such as landing pages and product pages.

When to choose WebP

You need to create images quickly, for example from a CMS on the fly.
Your editing tools or email clients don't open AVIF yet.
Small UI images and thumbnails, where the difference in bytes is tiny.

The fallback setup

Serve AVIF to browsers that support it, and WebP or JPG to the rest:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Describe the photo" width="1200" height="800" loading="lazy">
</picture>

Always include width and height so the page doesn't jump while images load. That jump hurts your Cumulative Layout Shift score. Use loading="lazy" for images below the fold, but not for the main image at the top.

How to make AVIF and WebP files

Resize the original to the largest size it's shown at with the image resizer.
Convert with JPG to AVIF and JPG to WebP, or the image converter for other formats.
For several sizes plus the HTML, use the SEO image pack. It makes WebP and AVIF sizes and a ready srcset snippet.

To go the other way, use AVIF to JPG or WebP to JPG when an app won't open a file.

Questions

Is AVIF always smaller than WebP?

No. For most photos it is, but for some simple graphics and tiny images WebP can be the same size or smaller. Test with your own images.

Should I still keep JPG files?

Keep the originals, and serve JPG as the last fallback in <picture>. Some email clients and older tools still need JPG.

Does Google prefer AVIF or WebP?

Search engines index both. What helps is a faster page. Smaller images improve Core Web Vitals, whichever modern format you use.

What about PNG?

Use PNG for screenshots, logos with sharp edges and anything that must stay pixel-perfect. Use SVG for icons and simple logos. See WebP vs JPG vs PNG.