Resize an AVIF Image

The efficiency gain is the point of doing this in AVIF

Resizing an AVIF rather than a JPG or a WebP means the output is the smallest practical file for its dimensions and quality, because AVIF compresses a photograph more efficiently than either of the others. For an image-heavy site that is a compounding saving across every page. The catch is that AVIF is a delivery format rather than a universal one, so the result is only appropriate where you control how it is served, and where a fallback exists for browsers that cannot display it.

MDN: image file type and format guide

Never resize an image up to reach a target

A reduction keeps the remaining pixels exactly and the result is sharp. An enlargement has to invent pixels, and the result is interpolated and soft. AVIF makes this worse rather than better, because the format has a 10-bit channel that encourages the expectation of very fine detail, and an enlarged AVIF shows its softness clearly against a background. A warning appears when a source is enlarged to reach the target, and the honest response is to use a smaller target size or to accept a source with more pixels.

• A reduction keeps the pixels that remain. It is always sharp.
• An enlargement invents pixels and cannot recover detail.
• AVIF enlargement shows softness clearly, because the format is capable of more detail.
• A warning appears when a source is enlarged. Use a smaller target instead.

NoteNever enlarge to hit a target. Use a smaller target or a larger source.

Encoding time is the cost nobody mentions

AVIF encoding is computationally expensive compared with JPG or WebP, and that is felt in two places. A single image takes noticeably longer to process, which is usually irrelevant. A batch of several hundred images can take long enough on a phone to look like the tool has failed. If you are processing a large set and the time is a problem, WebP reaches most of the size saving in a fraction of the time, and for most sites that difference does not matter enough to justify waiting.

• AVIF encoding is much slower than JPG or WebP.
• A single image is fine. A large batch can take a while.
• It is slower on a phone than on a desktop.
• WebP reaches most of the saving far faster, and usually suffices.

The fallback is not optional

A browser without AVIF support does not show a smaller or a lower quality image, it shows nothing at all. There is no graceful degradation, which makes the fallback a requirement rather than an improvement. Serving AVIF therefore means keeping a WebP or JPG copy alongside it, and that is a deliberate trade: more storage and one more file to manage, in exchange for a smaller file for the browsers that can use it. Where you can only upload a single file, WebP is the right choice, because a file that appears is worth more than one that is smaller.

NoteA browser without AVIF shows nothing, not a degraded image. The fallback is required.