Why Modern WordPress Sites Need Dual AVIF/WebP (And How to Cut Image Payloads by 80%)

Originally published on SmallPict Engineering Blog.

Images account for over 60% of total web page weight on the average WordPress site. On WooCommerce stores and media-heavy blogs, that number easily climbs past 80%.

When a mobile visitor opens your website over a cellular connection, downloading multi-megabyte JPEG or PNG hero banners is the single biggest culprit behind failing Google Core Web Vitals (Largest Contentful Paint - LCP).

Every additional second of load time directly drops conversion rates, inflates bounce rates, and hurts Google search rankings.

The Format Dilemma: JPEG vs WebP vs AVIF

For years, WebP was celebrated as the successor to legacy JPEG and PNG formats, cutting file sizes by roughly 25% to 35%.

However, AVIF (AV1 Image File Format) represents a much bigger generational leap:

• Up to 50% smaller than WebP at equivalent visual quality.
• Up to 80–85% smaller than original JPEGs.
• Exceptional preservation of fine gradients, text sharpness, and high-contrast boundaries.
• Native support for 10-bit and 12-bit High Dynamic Range (HDR) color profiles.

The Trap: Why Single-Format Delivery Breaks Browsers

If AVIF is so superior, why doesn't every WordPress site switch all images to AVIF?

The trap lies in legacy browser compatibility. While modern Chrome, Safari (v16.1+), and Firefox support AVIF natively, older mobile devices, embedded webviews, in-app social browsers (Instagram/Facebook/X in-app webviews), and legacy operating systems still cannot decode AVIF files.

If a plugin simply replaces .jpg file extensions with .avif, users on older devices or in-app webviews will see broken placeholder boxes or missing images.

The Solution: HTML5 Dual Picture Tag Delivery

The standard-compliant, future-proof solution is Dual Format Delivery using native HTML5 <picture> tags with progressive source fallback:

<picture>
  <!-- 1. Modern browsers download ultra-lightweight AVIF -->
  <source type="image/avif" srcset="hero.avif">
  <!-- 2. Compatible browsers fallback to WebP -->
  <source type="image/webp" srcset="hero.webp">
  <!-- 3. Legacy clients safely render original JPEG -->
  <img src="hero.jpg" alt="Optimized Hero Image" width="1200" height="630" loading="lazy">
</picture>

With this markup:

1. Modern devices download the razor-sharp 45KB AVIF asset.
2. Intermediate browsers download the 95KB WebP asset.
3. Older devices gracefully fall back to the original JPEG.

All of this happens natively in the browser's preload scanner without layout shifts (CLS) or JavaScript overhead.

The Cloud Quota Waste Problem (And How We Solved It)

Most WordPress image optimizer plugins suffer from a fundamental architectural flaw: they upload and convert every single thumbnail size to the cloud.

When you upload a single image to WordPress, the core system automatically generates 6 to 12 intermediate sub-sizes (e.g., thumbnail, medium, large, woocommerce_catalog, woocommerce_single, etc.).

If a plugin sends all 12 sub-sizes to an external cloud API for AVIF and WebP transcoding, a single photo upload consumes 24 cloud conversion credits! Your monthly plan quota evaporates in days.

The Zero-Cloud Local Sub-Size Generation Strategy

To solve this, we architected an upfront dispatch calculator in SmallPict:

1. Only the Master Image is Dispatched: SmallPict sends only the original high-resolution master asset to our cloud API for lossless/lossy next-gen conversion.
2. Local Generation via WP_Image_Editor: Once the optimized master .avif and .webp files return to your server, SmallPict reuses WordPress's native local image processor (WP_Image_Editor / GD or Imagick) to generate all intermediate thumbnail sub-sizes directly on your local server for free.
3. Zero Quota Waste: A photo with 12 thumbnails consumes only 1 cloud credit, saving you up to 90% in cloud processing fees.

Real-World Benchmark Results

We benchmarked a standard WooCommerce single product page featuring 8 high-resolution product photos before and after implementing this Dual AVIF pipeline on a simulated 4G mobile connection:

• Original Image Payload: 4.62 MB (JPEGs)
• SmallPict Optimized Payload: 684 KB (AVIF with WebP fallback)
• Total Weight Reduction: -85.2%
• Mobile Largest Contentful Paint (LCP): Dropped from 4.3 seconds to 1.1 seconds
• Google PageSpeed Mobile Score: Jumped from 41 to 96 (Green)

Summary & Next Steps

Delivering next-generation image formats shouldn't require trading off browser compatibility or burning through expensive cloud quotas. By pairing cloud-grade AVIF encoding with HTML5 <picture> fallbacks and local thumbnail generation, WordPress sites can achieve sub-second LCP scores on mobile networks.

If you are running a WordPress or WooCommerce site and want to test this pipeline:

• You can explore the SmallPict WordPress Plugin (free tier includes 100 images/month).
• Read the full technical documentation and benchmarks on our Engineering Blog.

Have you experimented with AVIF in production yet? What's your current strategy for handling legacy fallbacks? Let's discuss in the comments below!