Definition: AVIF is a raster image format that stores AV1-encoded data inside a HEIF-based structure. Its name stands for AV1 Image File Format, it commonly uses the .avif extension, and its MIME type is image/avif.
The format supports flexible compression, transparency, still images, and sequences. It can also represent SDR, HDR, and wide color gamut content. These capabilities do not guarantee a smaller file or a better image by themselves: results depend on the content, encoder, and settings.
Índice de contenidos
How AVIF Works
AVIF uses a HEIF container, which is based on the ISO Base Media File Format. The file stores AV1-encoded image items or sequences, together with properties describing dimensions, orientation, color, relationships between items, and other data needed to interpret them.
A still image is usually stored as an AV1 image item. Sequences can gather multiple frames to create animations. The container can also associate a color image with auxiliary items such as an alpha channel or a depth map.
The AVIF specification defines profiles and restrictions to improve interoperability between encoders and readers. The extension does not reveal every internal feature: two AVIF files may use different color depths, subsampling, compression, or structure and require different capabilities from the software opening them.
AVIF Compression
AV1 uses prediction, transforms, and other techniques to reduce spatial redundancy. AVIF can use lossy compression for small files or lossless mode when source values must be preserved. The main options include:
- Quality: Controls the balance between visual fidelity and file size.
- Speed: More exhaustive analysis may improve efficiency but increases encoding time.
- Subsampling: Reducing chroma information can decrease size, although it does not suit every graphic.
- Bit depth: The format can use 8, 10, or 12 bits per component depending on the profile and tools.
AVIF may outperform older formats in certain comparisons, especially for photographs, but there is no fixed saving that applies to every image. File size should be compared at equivalent quality, while fine details, text, edges, noise, and gradients should be reviewed before selecting parameters.
Color in AVIF
The format can represent SDR and HDR, monochrome images, different color spaces, and wide gamuts. Container metadata and properties indicate how values should be interpreted, while 10-bit or 12-bit depth reduces the risk of banding in demanding gradients.
For consistent results, the entire pipeline must correctly handle profiles, transfer characteristics, and color conversion. A file technically capable of storing HDR may lose that advantage if the editor, optimizer, CMS, or display transforms the data incorrectly.
AVIF Transparency
AVIF supports an alpha channel for fully or partially transparent pixels. This channel can be stored as an auxiliary item linked to the main image and can have its own encoding parameters.
Transparency is useful for cutout products, illustrations, and elements placed over changing backgrounds. Edges should be checked on light and dark backgrounds because unsuitable compression, subsampling, or alpha handling may create halos or visible changes.
Comparison With Other Formats
The choice should reflect image type, workflow, and required compatibility. The common differences are:
- JPG: It retains very broad historical compatibility and fast encoding but does not support transparency, HDR, or animation.
- PNG: It preserves pixels losslessly and works well for screenshots or graphics; AVIF may be smaller, but fidelity must be tested.
- WebP: It also offers lossy and lossless compression, alpha, and animation. It usually provides faster encoding and a longer support history.
- SVG: It is vector-based and preferable for shapes, icons, or logos that must scale sharply.
AVIF can store sequences and compete with GIF or animated WebP, although video is more appropriate for long content, audio, or playback controls. A master source should also be retained to prevent accumulated degradation from repeated conversion between compressed formats.
AVIF Optimization
Optimization should consider file size, quality, and encoding cost. To improve WPO, recommended optimization steps include:
- Adjust dimensions: Generate each image at the size needed for its presentation.
- Create variants: Combine different widths with
srcsetandsizes. - Test parameters: Compare quality, speed, bit depth, and subsampling for each image type.
- Keep fallback: Use
<picture>when part of the audience or system needs WebP, JPG, or PNG. - Measure results: Review transferred bytes, decoding time, visible quality, and metrics such as LCP.
Support is broad in modern browsers, but editors, libraries, CDNs, content management systems, applications, and bots should also be checked. A smaller variant does not automatically improve experience if it takes too long to generate, decodes poorly, or arrives without reserved dimensions that prevent layout shifts.