AVIF and Web Performance: Cut Page Weight and Speed Up Load Times
Images are the single largest contributor to page weight on most websites. Switching from JPEG or PNG to AVIF reduces image transfer size by 50 to 85 percent, directly cutting load time, improving Core Web Vitals, and reducing server bandwidth costs.
Images Are the Biggest Performance Problem on the Web
The HTTP Archive's Web Almanac consistently shows that images account for 50 to 60 percent of the total transfer size on the median webpage. In 2023, the median desktop page transferred 2.7 MB total, with images accounting for 1.5 MB of that. On mobile, where bandwidth is constrained, images represent an even larger share of the problem.
No other single optimization delivers results as large as format conversion. Switching a single 200 KB JPEG hero image to a 90 KB AVIF saves 110 KB on every page load. Multiply that across a site with dozens of images per page and millions of monthly visits, and the impact becomes significant.
How AVIF Improves Key Performance Metrics
Largest Contentful Paint (LCP)
LCP measures the time until the largest visible element finishes loading. Hero images and product photos are the most common LCP elements. An AVIF hero image downloads 50 to 60 percent faster than an equivalent JPEG, directly cutting your LCP time.
Total Blocking Time (TBT)
Images do not directly block JavaScript execution, but large image payloads compete for bandwidth on congested connections. Smaller images leave more bandwidth available for scripts, which reduces TBT on bandwidth-limited devices.
Cumulative Layout Shift (CLS)
CLS is caused by images loading without declared dimensions, not by image format. Always include width and height attributes on your <img> tags regardless of format.
Time to First Byte (TTFB)
TTFB is a server metric independent of image format. However, smaller images reduce CDN egress costs and server load under high traffic, which in turn reduces TTFB variance at scale.
Real-World Performance Numbers
These numbers come from Google's web.dev case studies and Cloudflare's image optimization data:
AVIF Performance Optimization Techniques
1. Serve responsive images with srcset
Do not serve full-resolution images to mobile devices. Use srcset to deliver appropriately sized AVIF files:
<picture>
<source
type="image/avif"
srcset="image-400.avif 400w,
image-800.avif 800w,
image-1200.avif 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1024px) 800px,
1200px"
>
<img src="image-800.jpg" alt="Description" width="800" height="600">
</picture>
2. Preload the hero image
The LCP image should load as early as possible. Use a <link rel="preload"> in your document head:
<link rel="preload" as="image" href="hero.avif" imagesrcset="hero-400.avif 400w, hero-800.avif 800w" imagesizes="(max-width: 600px) 400px, 800px" type="image/avif">
3. Lazy-load below-the-fold images
Use the native loading="lazy" attribute on all images that are not immediately visible:
<picture>
<source srcset="product.avif" type="image/avif">
<img src="product.jpg" alt="Product" loading="lazy"
width="400" height="400">
</picture>
4. Set the right quality level
AVIF quality 60 to 70 delivers excellent visual results for most photographic content at dramatically reduced file sizes. Quality 80 to 90 suits images where fine detail is critical. Quality below 50 is appropriate for thumbnails and social sharing images where file size is paramount.
AVIF on CDNs: Automatic Format Delivery
Major CDNs and image optimization services deliver AVIF automatically based on the browser's Accept header. You upload one source image and the CDN serves the right format to each visitor:
format=autof_auto in the URLauto=formatCut Your Image Weight Now
Convert JPEG, PNG, or WebP files to AVIF. Reduce your image payload by 50 percent instantly.
Convert Images Free