WebP vs AVIF vs JPEG vs PNG: which image format to use

Why the format matters

The same picture can be saved in several formats, and the files can differ in size by a factor of two or more at similar quality. On a page where images are the largest part, that difference decides how quickly the main image arrives, which is why the format is a lever on LCP. Lighthouse 13's "Improve image delivery" insight names it directly: it reports files where a modern format such as WebP or AVIF, or stronger compression, would make the download smaller.

The web has been slow to move. In the 2025 Web Almanac, among the images that were the LCP element, 57% were JPEG, 26% were PNG, 11% were WebP and under 1% were AVIF. WebP had gained about four points in a year, taken from JPEG. The Almanac suggests the slowness reflects the cost of migrating existing images and workflows, since the new formats are widely supported.

The formats compared

How much smaller

MDN's guide to image formats gives these figures: lossy WebP is on average 25 to 35 percent smaller than JPEG at visually similar quality, and lossless WebP is typically about 26 percent smaller than PNG. For AVIF, it says lossy files can be around half the size of the equivalent JPEG, with AVIF generally compressing better than WebP.

Treat these as averages, and expect your own images to land anywhere around them. A photo with smooth gradients saves more than one full of fine texture. A screenshot with text may compress better as lossless WebP or PNG than as lossy anything. The only number that matters is the one from your own images, at the quality that looks right at the size they are shown.

Which browsers support them

WebP works in all versions of Chrome, Edge, Firefox, Opera and Safari that people use today; MDN notes that on Safari for macOS it needs Safari 14 and macOS Big Sur (11) or newer. AVIF works in Chrome, Edge, Opera, Safari and Firefox. MDN's advice for AVIF and JPEG XL is the same: provide a fallback in a format with wider support, using the picture element. A visitor on a browser that does not understand the first source just uses the next one.

How to choose

1. Is it a logo, an icon or a simple drawing? Use SVG. It is small and stays sharp at any size.
2. Is it a photo? Use AVIF, with WebP and JPEG fallbacks. If your tools or your time allow only one modern format, WebP is the easier one: it is faster to produce, and support is deep.
3. Is it a screenshot or an image with text and flat colors? Try lossless WebP, then PNG, and compare sizes. Avoid lossy formats at low quality, which smear text.
4. Does it need transparency? WebP, AVIF, PNG or SVG. Not JPEG.
5. Is it an animation? Use a short video (MP4 or WebM) instead of a GIF. The same clip is usually many times smaller. Lighthouse flags large GIFs for this reason.

How to serve a modern format safely

In the page. The picture element lists the formats from best to safest. The browser takes the first it understands, and the img at the end is the fallback for everyone else:

<picture>
  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w" sizes="100vw">
  <img src="/img/hero-1600.jpg" width="1600" height="900" alt="The shop front">
</picture>

On the server or a CDN. Some servers and image services decide the format from the Accept header the browser sends, and answer with the best one it lists. This keeps the HTML simple, but caches must know that the answer depends on that header. MDN's guide to HTTP caching explains the rule: when a response varies with a request header such as Accept, name it in a Vary header, or a cache may serve one visitor's format to another.

Preload only one. If you preload the main image, preload the format most of your visitors will use. MDN warns that preloading several formats of the same image makes browsers that understand more than one download all of them.

Getting good files

• Compress by eye. Export at several quality settings and compare at the size the image is shown. A free browser tool such as Squoosh shows two versions side by side with their file sizes. Pick the lowest quality where you cannot see a difference.
• Use the right tool for batches. Command-line encoders for WebP and AVIF, image libraries for build scripts, and CMS plugins or services that convert on upload all do the job. Choose one that keeps the original file.
• Keep the originals. Re-encoding an image that was already compressed with loss compounds the damage. Always convert from the original, never from the last export.
• Resize first. A format change cannot rescue a 4,000-pixel image shown at 600. See responsive images.
• Mind the encode time. AVIF can take much longer to encode than WebP. For a big library, do it once at upload, not on every request.
• Check quality on real screens and on a sharp phone, not only on your monitor.

Special cases

• Photos with a lot of fine detail, such as foliage and fabric, show compression artifacts earlier. Raise the quality for them.
• Images with a lot of text. Prefer lossless or SVG.
• Hero images. Spend the most effort here: they decide LCP. A modern format, the right size and an early download matter more than anywhere else. See how to fix a slow LCP.
• Email and social cards. Many email clients and social sites still expect JPEG or PNG. Keep those versions for them.
• Print and downloads. Provide the original, not the web version.

Check your own page

Run the free audit and look at the image findings. If large JPEG or PNG photos are listed with a smaller modern version as the suggestion, convert the largest one first, check it by eye, and test the page again.

Sources

• Image file type and format guide on MDN: each format, its compression and its browser support.
• HTTP caching on MDN: the Vary header and content negotiation.
• rel="preload" on MDN: preloading one format only.
• Performance chapter of the 2025 Web Almanac: the formats used for LCP images.