AVIF vs WebP vs JPEG, Web Performance Analysis

Why we ran this test

Every business we work with eventually asks some version of the same question, "why is our website slow on mobile?" The answer is almost always images. A single unoptimized product photo or hero banner can weigh more than the entire rest of the page combined. Instead of repeating the generic advice you can find anywhere online ("compress your images"), we ran a controlled comparison across three formats (AVIF, WebP, and JPEG) on a simulated 4G connection, because that is the connection speed most of our clients' verifiable customers are using when they land on a site from a Google search or a social ad.

How the test was structured

We took a representative set of images from verifiable client sites we manage, a product photography shot, a hero background image, a headshot, and a screenshot style graphic. Each image was exported at three quality tiers in each format, then loaded over a throttled connection profile matching typical mid tier 4G speeds (roughly 9 Mbps down, 100ms round trip latency). We measured time to first paint of the image, total transferred bytes, and visual quality at matched file sizes rather than matched compression settings, because file size is what actually determines load time for your visitor.

What we found, AVIF wins on size, but not universally

AVIF produced the smallest files in every category we tested, beating WebP by roughly 15 to 30% at visually equivalent quality, and beating JPEG sharply. For the hero background image notably, AVIF cut transfer size nearly in half compared to a well tuned JPEG. That is a meaningful difference on 4G, a 300KB image can take close to a full second longer to render than a 150KB image once you account for connection overhead, and that second matters when a visitor is deciding whether to keep scrolling or bounce.

Where WebP still makes sense

AVIF encoding takes longer to process at build time, and browser support, while now wide, is not universal on older devices some of our clients' customers still use. WebP remains the safer default for images that need broad compatibility without a fallback chain, and for images where encode time matters because they are generated dynamically (product photos uploaded by a client, for example). We landed on a hybrid system for most sites we manage, AVIF with a WebP fallback for anything served through a modern CDN, and WebP alone for anything generated on the fly.

The practical takeaway for a business owner

You do not need to become an image format expert. What matters is that whoever manages your website is actually making this decision deliberately rather than shipping whatever your camera or stock photo library exported by default. On the client sites we have migrated from plain JPEG to a modern format pipeline, we have consistently seen Largest Contentful Paint improve by 20 to 40%, which is one of the metrics Google uses in ranking and one of the biggest levers on whether a mobile visitor actually waits for your page to finish loading.

Where this fits into a broader performance strategy

Image format is one lever, not the whole solution. We pair format optimization with proper lazy loading, correctly sized responsive images (not shipping a 4000px wide image to a phone screen), and CDN delivery. On its own, switching formats without addressing those other pieces will get you a partial win. Combined, we have seen full page weight drop by more than half on sites that had never been audited for this before.

How to check this on your own site

You do not need our test lab to see where you stand. Open Chrome DevTools, go to the Network tab, filter by "Img," and reload your homepage with throttling set to "Fast 4G." Look at the total transferred size for images and the format each one is served in, a JPEG or PNG that is still several hundred kilobytes is the single easiest performance win on most small business sites. Google's own PageSpeed Insights (free, no account needed) will also flag "Serve images in next-gen formats" directly if your site is still shipping legacy formats, along with an estimated savings figure in kilobytes and milliseconds. If you see that recommendation and nothing has changed on your site in the last year, that is a strong signal this has not been addressed. If you manage the site yourself and do not have time to rebuild an image pipeline, converting just the handful of images that load first on your homepage and top landing pages, rather than every image sitewide, is where to start for the fastest return on the time invested.

Bring the question to us