Blog

AVIF-First Images: Cut Your Image Payload by 50%

June 17, 2026 · 7 min read

Images are the heaviest files on most websites. On a typical marketing blog, images account for 50-80% of total page weight. If your images are JPEG — or even WebP — they are consuming roughly twice the bandwidth they need to.

AVIF (AV1 Image File Format) delivers the same visual quality as WebP at approximately half the file size. A 200KB WebP hero image becomes a 100KB AVIF file with no visible difference. Across an entire site, this translates to a 25-35% reduction in total page weight, measurably faster load times, and improved Core Web Vitals scores.

I converted all images across our 52-site network to AVIF-first serving with WebP and JPEG fallbacks. The implementation took an afternoon. Total image bandwidth dropped by 45%.

Why AVIF Matters for Marketers

Most marketers are not image format experts, and they should not need to be. Here is why AVIF matters in business terms:

Faster pages = lower bounce rates. Google's research shows every 100ms of load time improvement reduces bounce rates by approximately 7%. Cutting your image payload in half can shave 200-500ms off load times on mobile connections. That is a measurable bounce rate improvement from a single technical change.

Better Core Web Vitals = better rankings. Largest Contentful Paint (LCP) — one of Google's three Core Web Vitals — measures how quickly the largest visible element loads. For most blog posts, the largest element is the hero image. A 50% smaller hero image means a significantly faster LCP score.

Lower hosting costs. For sites on bandwidth-metered hosting, smaller images directly reduce costs. A 45% reduction in image bandwidth can be the difference between a free hosting tier and a paid plan.

Competitive advantage. As of early 2026, fewer than 15% of websites serve AVIF images. Implementing AVIF puts your site's performance ahead of 85% of competitors.

AVIF Browser Support

AVIF is supported by Chrome (85+), Firefox (93+), Safari (16.1+), Edge (121+), and Opera. Combined global support exceeds 93%.

The 7% of browsers that do not support AVIF will receive WebP or JPEG fallbacks through the HTML <picture> element — a progressive enhancement technique that serves the best format each browser can handle.

No user sees a broken image. Every user gets the fastest format their browser supports.

Implementation for Non-Technical Marketers

Option 1: CDN-Based Auto-Conversion

If you use Cloudflare (free tier), enable "Polish" in the Speed settings. Cloudflare automatically converts and serves images in AVIF format to compatible browsers. You do not change any HTML or image files — the conversion happens at the CDN level.

This is the simplest implementation: enable one setting, done.

Option 2: Build Pipeline Conversion

For sites using a static site generator (Eleventy, Next.js, Hugo), add an image processing step to your build:

const Image = require("@11ty/eleventy-img");

async function imageShortcode(src, alt) {
  let metadata = await Image(src, {
    widths: [400, 800, 1200],
    formats: ["avif", "webp", "jpeg"],
    outputDir: "./_site/images/"
  });
  // Returns picture element with all formats
}

This generates AVIF, WebP, and JPEG versions of every image at multiple sizes. The HTML output automatically uses the <picture> element to serve the right format.

Option 3: Manual Conversion

Convert images manually before uploading:

# Using Sharp (Node.js)
npx sharp-cli --input hero.jpg --output hero.avif --format avif --quality 65

# Using Squoosh CLI
npx @squoosh/cli --avif '{quality:65}' hero.jpg

Then update your HTML to use the <picture> element:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Description" width="1200" height="630" loading="lazy">
</picture>

Quality Settings

AVIF quality settings work differently than JPEG. An AVIF quality of 65 produces results visually equivalent to a JPEG quality of 85 — at roughly 25% of the file size.

Recommended settings:

• Hero images and photographs: quality 60-65
• Charts and data visualizations: quality 70-75 (preserves text sharpness)
• Icons and logos: use SVG instead (vector graphics do not benefit from AVIF)
• Screenshots: quality 70 (preserves text legibility)

The Performance Impact

Across our 52-site network, converting from WebP to AVIF:

• Average image payload per page: reduced from 380KB to 210KB (-45%)
• Largest Contentful Paint: improved by 200ms average
• Total page weight: reduced 25-35%
• All sites achieved "Good" Core Web Vitals scores

These improvements are additive with other performance optimizations. Combined with service worker precaching, our return visit load times are under 100ms across the network.

Common Concerns

"AVIF encoding is slow." True — AVIF encodes 5-10x slower than JPEG. For static sites, encoding happens once during the build process. A 30-second increase in build time is negligible compared to the ongoing performance benefit.

"My CMS doesn't support AVIF." Most modern CMS platforms (WordPress 6.5+, Ghost, Webflow) support AVIF uploads. For platforms that do not, use a CDN with auto-conversion (Cloudflare, Imgix, Cloudinary).

"Social media doesn't support AVIF for og:image." Correct — continue using JPEG for Open Graph images. Use AVIF for on-page display only.

Getting Started Today

1. Check if your CDN offers auto-conversion (Cloudflare Polish is free)
2. If not, install Sharp or Squoosh CLI
3. Convert existing images (batch processing takes minutes)
4. Update HTML templates to use <picture> elements
5. Verify Core Web Vitals improvements in Search Console

Time to implement: 1-2 hours for a single site. The performance improvement is immediate, permanent, and measurable.

For the complete site performance optimization strategy, see The $20 Dollar Agency and The $100 Dollar Network.