网站添加AVIF 2026：5分钟设置 [分步指南]

HTML Implementation

The picture element provides the foundation for serving AVIF with fallbacks.

<!-- Basic AVIF with fallbacks -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

<!-- Responsive AVIF -->
<picture>
  <source
    srcset="image-400.avif 400w, image-800.avif 800w, image-1200.avif 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
    type="image/avif">
  <source
    srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
    type="image/webp">
  <img
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
    alt="Description"
    loading="lazy">
</picture>

Server Configuration

Proper MIME type configuration ensures browsers interpret AVIF correctly.

• MIME Type: image/avif must be configured. Most modern servers include this, but verify yours does.
• Caching Headers: Set long cache durations for AVIF files—they don't change once generated.
• Compression: Don't gzip AVIF files. They're already compressed; additional compression adds CPU overhead with no benefit.

# Apache - Add to .htaccess or httpd.conf
AddType image/avif .avif

# Nginx - Add to nginx.conf or site config
types {
    image/avif avif;
}

# For content negotiation (Apache)
<IfModule mod_negotiation.c>
  Options +MultiViews
</IfModule>

CDN Options

CDNs can handle format conversion automatically, simplifying implementation significantly.

Cloudinary, imgix, and Cloudflare Images all offer automatic AVIF conversion. Upload your source images, and the CDN generates and serves the optimal format based on browser support.

This approach is particularly valuable for existing sites with large image libraries. No need to convert thousands of images manually—the CDN handles it on-demand.

Testing and Validation

Verify your AVIF implementation works correctly across browsers.

• DevTools Network Tab: Filter by image requests and verify Content-Type: image/avif in response headers.
• Browser Testing: Test in Chrome, Firefox, Safari, and Edge. Verify fallbacks work in older browser versions.
• PageSpeed Insights: Run Google's tool to confirm images are properly optimized and scored.
• Visual Comparison: Spot-check converted images against originals to ensure quality meets standards.