Web Image Formats Compared: AVIF vs WebP vs PNG

The Quick Verdict

Most websites still ship JPEGs and PNGs out of habit, and most of those files are heavier than they need to be. If you only change one thing about how you handle images, make WebP your default format for photographs on the web. It produces files 25 to 35 percent smaller than JPEG at the same visible quality, keeps alpha transparency, and now renders in 97.18 percent of browsers according to live data from Can I Use.

AVIF goes further. Built on the AV1 video codec, it is commonly cited as roughly 50 percent smaller than JPEG and 20 to 30 percent smaller than WebP, with support for HDR and wide color. Browser support sits at 96.35 percent. The catch: it encodes much slower than WebP, so it works best for images you optimize once at build time, not for user uploads you must process instantly. Use AVIF for hero images and high-traffic pages, WebP everywhere else, and keep JPEG or PNG as a fallback for the long tail. Keep reading for the full comparison and the exact markup to serve all three safely.

The Formats at a Glance

Before the details, a side-by-side view. These are averages across real-world tests; your exact savings vary with each image.

A few definitions, in case the table reads like alphabet soup. Lossy means the encoder discards visual detail your eyes cannot resolve, which produces dramatic size drops. Lossless preserves every pixel exactly. Alpha transparency means parts of the image can be see-through. I use all four terms below, so they are worth ten seconds now.

Also Read:

WCAG Contrast Ratios: A Designer’s Cheat Sheet

AVIF: The Smallest Files, With One Catch

AVIF stands for AV1 Image File Format. It arrived in 2019 from the Alliance for Open Media, a group that includes Google, Mozilla, Apple, Netflix, Amazon, and Cisco. Think of it as a single frame of AV1 video, the codec YouTube and Netflix use for HD streaming, saved as a still image. Because modern video codecs are the best compression engines humanity has built, AVIF inherits that power.

The headline numbers come from independent benchmarkers rather than one vendor. A 2026 benchmark encoded the same 1920 by 1080 photo at indistinguishable quality and got 263 KB in JPEG, 168 KB in WebP, and 102 KB in AVIF. The AVIF file was under 40 percent of the JPEG. On a product page with six photos, that is the difference between 4.9 MB and 1.9 MB of images, or roughly four seconds versus a second and a half on a 10 Mbps connection. That gap decides whether a shopper stays or bounces.

Browser support is no longer the blocker it was. Live Can I Use data shows 96.35 percent global support: Chrome 85 and newer, Edge 121 and newer, Safari 16.1 and newer with full support from 16.4, and Firefox 93 and newer. Animated sequences are the one weak spot, so keep GIF-style loops in WebP for now.

Also Read:

Purposeful Motion: UI Animation That Builds Trust

The real catch is encoding speed. AVIF encodes 5 to 10 times slower than JPEG; one benchmark measured about 2.5 seconds per image against 0.3 for JPEG. That cost matters when a site must compress thousands of user uploads on the fly, but it is irrelevant when you optimize images once at build time and cache the result. I treat AVIF as a build-time format: export it during your site build, serve it to everyone, and never encode it at runtime.

WebP: The Safe Default

Google released WebP in 2010 as a single replacement for JPEG, PNG, and GIF. It compresses 25 to 35 percent smaller than JPEG at equivalent quality according to Google’s own documentation, supports lossless mode at about 26 percent smaller than PNG, keeps full alpha transparency, and handles animation. Safari was the last major browser to support it, shipping in Safari 14 in 2020. Since then, support has climbed to 97.18 percent.

Encoding is fast, tooling is mature, and every image CDN on the market speaks it. Most content management systems convert uploads to WebP automatically. WordPress started generating WebP sub-sizes in 2021 and added AVIF support in WordPress 6.5. If your team can only adopt one format, this is the one.

Also Read:

Figma to Code Tools: Ship Designs Faster

WebP has one honest weakness: on hard-edged graphics like UI screenshots and line art, the savings over PNG are smaller than you might expect. Occasionally WebP even comes out larger. I always export both formats for UI graphics and ship whichever file is smaller.

When JPEG, PNG, GIF, and SVG Still Win

Newer is not always better. Each legacy format holds territory the modern ones cannot take.

JPEG stays the right call whenever compatibility is non-negotiable. Email clients, printers, form uploads, and office software read JPEG without question. Some do not open WebP at all. For social preview images, JPEG is equally safe. When you hand a file to a person, an app, or a device you do not control, JPEG is the format.

Also Read:

Microinteractions in UI Design: Small Details That Improve UX

PNG wins for pixel-perfect graphics and transparency you cannot compromise on. Screenshots with small text, UI mockups, logos with crisp edges, and any master file you will edit again belong in PNG. Lossy re-saves compound damage: every generation of JPEG recompression adds artifacts, so keep a lossless original and generate web copies from it. A photo you plan to re-edit repeatedly should live as PNG, or better yet as a RAW or TIFF master.

GIF survives for one reason: universal animation support. Animated WebP compresses far better, and video compresses better still, but GIF opens everywhere, including ancient email clients. For a tiny looping icon or a reaction image in an email, GIF remains practical. For animations on the web itself, use animated WebP or a muted looping video instead.

SVG is not a photo format at all. It describes shapes as vectors, so logos, icons, and illustrations stay perfectly sharp at any size with tiny file sizes. If your graphic can be drawn rather than photographed, SVG beats every raster format on the list. The WCAG contrast cheat sheet I published earlier is worth revisiting here: format choice means nothing if your colors fail accessibility. Check contrast ratios while you optimize weight.

How to Serve Them All Without Breaking Anything

You never have to pick just one format. The HTML picture element lets you offer AVIF first, WebP second, and JPEG last. Browsers take the first source they can render and ignore the rest, so old browsers fall back gracefully with zero JavaScript.

Here is the pattern I use on client sites:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Designer comparing website layouts on two monitors" loading="lazy">
</picture>

Two details matter. First, order counts: browsers use the first supported format in the list, not the smallest file, so put AVIF first. Second, keep the original in the plain img element. Google indexes the image from the img tag, and a plain JPEG there guarantees indexing even for formats search engines ignore.

Generating three versions of every image sounds like work, and it is, until you automate it. Squoosh, Google’s free browser tool, converts single images in seconds. For batches, the Sharp library in Node or the cwebp and avifenc command-line tools fold into a build script. Most image CDNs, including Cloudflare and Cloudinary, can also do format negotiation automatically: upload one high-quality original and let the CDN serve AVIF or WebP based on the browser’s Accept header. Exporting finished designs from Figma is a good moment to build this pipeline, since asset export is where formats get decided by default.

One more performance note, since image weight is only half the story. Smaller files improve Largest Contentful Paint, the Core Web Vital that measures how fast your main content appears. But layout shift from unreserved image space can undo that gain. Always set width and height attributes or use aspect-ratio boxes so the page layout stays stable while images load. Page weight affects conversions directly: shaving megabytes off images is one of the cheapest conversion wins a designer can claim.

Conclusion: Pick the Right Format, Then Automate It

The decision tree fits in one paragraph. Sending a file to someone or a system you do not control? JPEG for photos, PNG for graphics. Publishing on your own site? WebP as the everyday default, AVIF for hero images and high-traffic pages where every kilobyte compounds. Need transparency on crisp graphics or a lossless editing master? PNG. Icons and logos? SVG. Tiny loops in email? GIF. Animation on the web? Animated WebP or video.

Then remove the manual step. Build format conversion into your export or build pipeline once, and every future image ships optimized without anyone thinking about it. If you want the deeper craft side of the equation, my guides on animation performance on the web pair naturally with this one: fast-loading images and well-timed motion are the two halves of a site that feels instant.

Start this week: open your heaviest page, convert its five largest images to WebP, and measure the difference. I suspect the numbers will make the rest of the migration an easy sell to your team.