Introduction: Get the Best of Every Format
AVIF compresses 30% smaller than WebP. WebP compresses 34% smaller than JPEG. But you can't pick just one — different browsers support different formats. The solution: serve all three using the HTML <picture> element, and let each browser pick the best format it supports.
This tutorial shows the exact code for implementing AVIF with WebP and JPEG fallback. We'll cover static HTML, Blogger, WordPress, and modern frameworks — with copy-paste code that works in production. By the end, your site will serve the smallest possible image to every visitor without breaking a single browser.
If you're still researching avif vs webp as the best image format for websites, this article assumes you've decided to use both — and just need the implementation code.
How the Picture Element Works
The HTML <picture> element wraps multiple <source> elements (each with a different format) and one fallback <img>. The browser checks each source in order, picks the first format it supports, and stops. The <img> at the end is the universal fallback for browsers that don't recognize any source.
Step-by-Step Implementation
Visit convertiimage.com. Upload your source JPEG. Convert once to AVIF (quality 60%) and once to WebP (quality 80%). You'll now have three files: original.jpg, original.webp, original.avif.
Place all three files in the same directory on your hosting (e.g., /images/blog/). Make sure file names match except for the extension: hero.jpg, hero.webp, hero.avif.
Replace your standard <img> tag with the <picture> element below. Browser order matters: AVIF first, WebP second, JPEG fallback last.
Open the page in Chrome (loads AVIF), Firefox (loads AVIF), Safari 16+ (loads AVIF), Safari 15 (loads WebP), and an older browser (loads JPEG). Use DevTools → Network tab to confirm which format loaded.
Implementation for Different Platforms
For Static HTML / Hand-Coded Sites
Use the picture element directly as shown above. No additional setup needed.
For Blogger (Blogspot)
Blogger's editor supports raw HTML. Switch to HTML view (the <> button) and paste the picture element. Upload AVIF, WebP, and JPEG files separately to your image hosting (Google Photos, Cloudinary, or any CDN) and reference them by URL.
For WordPress
The simplest WordPress approach is using a plugin like ShortPixel Adaptive Images or Imagify, which auto-generate the picture element for every uploaded image. For manual control, install WebP Express (which supports AVIF) or use a custom shortcode that outputs the picture element.
For React / Next.js
Next.js's built-in <Image> component automatically generates AVIF and WebP versions and serves them via the picture element when you set formats: ['image/avif', 'image/webp'] in your next.config.js.
width and height attributes on the fallback <img>. This reserves layout space before the image loads — eliminating Cumulative Layout Shift (CLS) and improving your Core Web Vitals score.
Testing Your Implementation
After deploying, verify the picture element is working correctly:
- Chrome DevTools: Open Network tab, reload the page, look for the loaded image. You should see "hero.avif" — confirming AVIF served to Chrome.
- Safari (older version): Open Web Inspector → Network. Should show "hero.webp" if Safari version is below 16.4, or "hero.avif" for newer.
- BrowserStack or LambdaTest: Test in older browsers (IE11, old Android browsers) to verify JPEG fallback loads correctly.
- PageSpeed Insights: Run before/after audits — you should see image weight drop significantly with AVIF deployed.
Common Mistakes to Avoid
- ❌ Wrong source order — AVIF must come BEFORE WebP. Browsers pick the first matching source they support.
- ❌ Missing
typeattribute — without it, browsers can't filter formats they don't support and may load broken images. - ❌ Forgetting the
<img>fallback — without it, browsers that don't support<picture>show nothing. - ❌ Different image dimensions across formats — AVIF, WebP, and JPEG must all have identical width × height to prevent layout shifts.
- ❌ Forgetting alt text — alt text always goes on the
<img>fallback element, not on<source>elements.
image/avif). Some older Apache or Nginx configurations don't include AVIF by default. Add AddType image/avif .avif to your .htaccess file or update your nginx mime.types configuration.
Tips for Production Deployments
- 🎯 Pre-encode all images on the server — never encode AVIF at request time
- 🎯 Set long Cache-Control headers (1 year+) on AVIF/WebP files — they're immutable once published
- 🎯 Use a CDN that supports AVIF delivery — Cloudflare, Cloudinary, Fastly, Bunny CDN all support AVIF in 2026
- 🎯 Add the AVIF MIME type to your server config — required for correct content negotiation
- 🎯 Monitor with PageSpeed Insights monthly — verify your LCP improvement holds over time
Conclusion: Three Formats, One Tag, Zero Compromises
The HTML <picture> element is the production-ready way to deploy AVIF without breaking older browsers. Every visitor gets the smallest format their browser supports — AVIF where possible, WebP as fallback, JPEG as universal safety net.
Implementation takes 5 minutes per image. Start with your highest-traffic pages — hero images and featured posts — and roll out site-wide as you convert more images. Use convertiimage.com to convert source images to both AVIF and WebP in one place.
Related Resources
Frequently Asked Questions
Yes — the <picture> element is supported by 99%+ of browsers in 2026. Browsers that don't recognize it simply ignore the <source> tags and load the fallback <img> — the same JPEG you'd serve anyway. There's no downside to using it.
Order from smallest to largest format: AVIF first (smallest), WebP second (mid-size), JPEG fallback last (largest). The browser picks the first format it supports — so listing AVIF first ensures supporting browsers get AVIF instead of falling through to WebP unnecessarily.
Yes. In Blogger's post editor, switch to HTML view (the <> button) and paste your <picture> markup. Host your AVIF, WebP, and JPEG files on a CDN or directly in Blogger's image hosting, then reference each URL in the appropriate <source> or <img> tag.
No — Google reads the alt text from the <img> element inside the <picture> tag exactly as it would in any standard image. Image SEO is fully preserved. The page speed improvement from smaller AVIF files actually boosts your ranking through better Core Web Vitals scores.
Add it manually. For Apache, add this to .htaccess: AddType image/avif .avif. For Nginx, edit the mime.types file and add: image/avif avif;. For Node.js or modern frameworks, the MIME type is usually auto-detected. Without the correct MIME type, browsers may reject the AVIF file.
