AVIF MIME Type: image/avif

About AVIF image files

AVIF, based on the AV1 video codec, compresses photos even better than WebP and supports HDR. Encoding is slow, so generate AVIF ahead of time rather than per request. Offer it first in a <picture> element, followed by WebP or JPEG.

File signature

AVIF files start with "ftypavif" at byte 4. The extension and the type a browser reports for an upload both come from the file name, so check these bytes on the server before trusting a file.

Serve .avif with the right Content-Type

Response header

Content-Type: image/avif

nginx (a line in the types { } block of mime.types)

image/avif avif;

Apache (.htaccess or server config)

AddType image/avif .avif

Caddy

@avif path *.avif
header @avif Content-Type "image/avif"

Check what a server sends

curl -sI https://example.com/file.avif | grep -i '^content-type'
# Content-Type: image/avif

Set the type in code

Node.js (Express)

res.set('Content-Type', 'image/avif');
// Or make the browser download it:
res.attachment('file.avif');

Python

import mimetypes

mimetypes.add_type('image/avif', '.avif')  # if your system doesn't know it
mimetypes.guess_type('file.avif')[0]  # 'image/avif'

mime.AddExtensionType(".avif", "image/avif")
w.Header().Set("Content-Type", "image/avif")

Accept .avif uploads

HTML

<input type="file" accept=".avif,image/avif">

The accept attribute only filters the file picker; users can still choose another file. Listing the extension as well as the type matters, because operating systems don’t always report the type you expect.

Related types

.webp (image/webp): WebP image
.jpg (image/jpeg): JPEG image
.heic (image/heic): HEIC image

More images

.png , .gif , .ico , .bmp , .tiff . Look up any extension or type with the MIME type lookup.

Sources

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions

What is the MIME type for .avif files?

image/avif. The full header is "Content-Type: image/avif".

Why does my server send the wrong Content-Type for .avif?

Web servers pick the type from the file extension using a table (mime.types in nginx and Apache). If .avif is missing from that table, they send a default such as application/octet-stream or text/plain. Add the mapping as shown on this page, then check the response with "curl -sI".

How can I check that a file really is AVIF?

Look at the first bytes rather than the extension or the type the browser reports, which both come from the file name. AVIF files start with "ftypavif" at byte 4. The MIME type lookup on this site reads them for you when you drop a file on it.