Aarunya AppsAarunya Apps
image/avif

image/avif MIME Type — AVIF vs WebP vs JPEG Performance Guide

AV1 Image File Format. The newest and most efficient image format for web delivery, based on the AV1 video codec. AVIF typically achieves 50% smaller file sizes than JPEG at equivalent quality. Supports HDR, wide colour gamut, transparency, and animation. Supported by Chrome, Firefox, and Safari 16+.

Type
image
Compressible
No (pre-compressed)
Extensions
.avif

Used For

  • Next-generation web images
  • Photography-heavy sites wanting maximum compression
  • Sites targeting modern browsers only

HTTP Header Example

HTTP/1.1 200 OK
Content-Type: image/avif
Cache-Control: public, max-age=31536000

Code Examples

// Convert to AVIF using sharp
import sharp from 'sharp'

const avif = await sharp('./photo.jpg').avif({ quality: 60 }).toBuffer()
res.set('Content-Type', 'image/avif').send(avif)

// Serve with AVIF → WebP → JPEG fallback chain:
// <picture>
//   <source type="image/avif" srcset="/photo.avif" />
//   <source type="image/webp" srcset="/photo.webp" />
//   <img src="/photo.jpg" alt="..." />
// </picture>

// Next.js Image component supports AVIF via next.config:
// images: { formats: ['image/avif', 'image/webp'] }

Related MIME Types

image/webpimage/jpegimage/png

All MIME Types

Browse the complete MIME type reference.

View All MIME Types

Frequently Asked Questions

What is the image/avif MIME type?

AV1 Image File Format. The newest and most efficient image format for web delivery, based on the AV1 video codec. AVIF typically achieves 50% smaller file sizes than JPEG at equivalent quality. Supports HDR, wide colour gamut, transparency, and animation. Supported by Chrome, Firefox, and Safari 16+.

When should I set Content-Type: image/avif?

Set Content-Type: image/avif on HTTP responses that contain AVIF Image data. Next-generation web images.

What file extensions use image/avif?

Files with image/avif content typically use these extensions: .avif.

What happens if I serve this with the wrong Content-Type?

Browsers use the Content-Type header to decide how to handle the response. Serving image/avif content with an incorrect MIME type can cause browsers to display it incorrectly, refuse to execute it (scripts), or prompt an unintended download. Modern browsers respect X-Content-Type-Options: nosniff and will not attempt to auto-detect the type.