AVIF MIME Type – Free, Online, Private

What .avif is

AVIF stores AV1-compressed pictures in the HEIF container, which is an ISOBMFF file. The file starts with a size and the fourcc ftyp, and a compatible brand of avif or avis. avis is the animated brand. Both still and animated sequences use image/avif on the web. The container can also hold an alpha plane. It is not the same file as HEIC, which uses the HEVC codec and the type image/heic, even though the box structure looks similar if you only check for ftyp.

IANA registers image/avif. The media type is image/avif. Extensions that use it on this page: .avif. A client compares the type, not the filename, once the response has arrived. The filename still matters on disk and in Content-Disposition, which is why a wrong extension and a wrong header are two different bugs.

What sends image/avif

What sends image/avif: Send image/avif for a .avif file and for a negotiated image variant. As with WebP, Vary: Accept is required when one URL returns different bytes based on the client's Accept header. Browsers that do not decode AVIF should receive the JPEG or PNG fallback, with that fallback's own type. Do not send image/avif for a HEIC upload that a phone named .avif. Check the brand. A mismatch decodes as a broken image and wastes a support thread. The file on disk is still .avif. Once the response exists, a client trusts image/avif, not the filename. Use AVIF when you have measured a real saving over WebP and JPEG for that image class. Screenshots of UI with flat color sometimes compress better as PNG. Photographs often compress better as AVIF. The Content-Type does not express that tradeoff. The file size does.

Content-Type for .avif

Send image/avif and do not add a charset parameter. The body is binary. A charset tells a text decoder to reinterpret bytes that are not text, which corrupts a download and does not help a browser sniff the format.

Content-TypeContent-Type: image/avif

nginx, Apache, and Express

These snippets map .avif to image/avif. nginx reads the types block when it picks a type from the URL's extension. A location that sets default_type, or an application that sets the header itself, overrides that map. Apache AddType applies in the directory context where you put it. The Express static example writes the header for files ending in .avif so a stale mime database in the framework cannot disagree with the type on this page.

nginx# /etc/nginx/mime.types, inside the types { } block
image/avif                  avif;

ApacheAddType image/avif .avif

Expressimport express from "express";

const app = express();
app.use(express.static("public", {
  setHeaders(res, filePath) {
    if (filePath.endsWith(".avif")) {
      res.setHeader("Content-Type", "image/avif");
    }
  },
}));

Pitfalls for image/avif

Pitfalls that show up for image/avif, and not for a neighboring type with a similar extension: AVIF encoding is slow. A request-time encode will blow a timeout and the error page will be text/html on a URL clients cached as an image. Encode ahead of the response and serve the bytes as a static file. Another trap is stripping the HEIF pitm box while 'optimizing' and leaving a file no decoder can anchor. A third is serving AVIF from a server whose mime.types predates the type, so the response falls through to application/octet-stream and the browser downloads it. The snippet on this page is the line those old tables are missing.

• image/avif-sequence is not what browsers require for an animated AVIF. Use image/avif.
• The major brand can be mif1 with avif in the compatible brands. Accept that file. Do not require the major brand to be the only check.
• A charset parameter does not belong here. The container is binary.
• Color profiles live in a colr box. Dropping unknown boxes can shift colors. If you rewrite the file, keep colr.