Why AVIF Blurs Low-Resolution Icons

AVIF is widely celebrated for its superior compression efficiency when handling complex photographic content, yet it frequently produces blurry, smeared results when applied to very low-resolution icons. This paradox occurs because the AV1 video codec architecture underlying AVIF was built to prioritize smooth gradients and artifact suppression over hard, pixel-level boundaries. In very small images, features such as aggressive in-loop filtering, default chroma subsampling, and frequency-based transform coding actively discard the sharp, high-contrast transitions that define tiny icons.

Aggressive In-Loop Filtering

The AV1 codec relies heavily on internal post-processing filters to eliminate compression artifacts and keep file sizes small. The primary culprits behind blurred icons are the deblocking filter, the Constrained Directional Enhancement Filter (CDEF), and loop restoration.

In photographic images, these filters successfully smooth out harsh block boundaries and ringing artifacts. However, low-resolution icons—such as 16x16 or 32x32 favicons—consist almost entirely of deliberate, hard-edged transitions. AV1's filtering pipeline cannot distinguish between an unwanted compression artifact and an intentional, sharp 1-pixel border. As a result, the encoder identifies these sharp pixel contrasts as noise or blocking, smoothing them out and causing immediate blurriness.

Transform Coding Discards High Frequencies

AVIF utilizes transform coding (such as the Discrete Cosine Transform) to convert spatial pixel data into frequency representations.

• Low frequencies define overall color and general shapes.
• High frequencies define sharp borders, fine lines, and abrupt color changes.

To minimize file size, lossy quantization algorithms discard high-frequency data first, assuming the human eye will not notice the missing detail in a natural scene. In a miniature graphic, virtually the entire image relies on high frequencies to retain its shape. Once quantization removes those frequencies, crisp vector-like edges degrade into soft gradients.

Chroma Subsampling Bleeds Color

Many standard AVIF encoders default to the YUV420 pixel format to maximize space savings. In YUV420, color information (chrominance) is sampled at half the horizontal and vertical resolution of brightness information (luminance).

If a 16x16 icon is converted using YUV420, its color map is effectively compressed into an 8x8 grid. With only a quarter of the color resolution available, adjacent colors bleed into one another. A sharp red line on a white background immediately gains a pink, fuzzy halo around its perimeter.

Block Size Constraints

AV1 organizes image data into nested blocks called superblocks, which can be subdivided down to 4x4 pixel blocks. While a 4x4 block is tiny relative to a 4K video frame, it represents over 6% of the entire canvas on a 16x16 icon.

Because prediction and transform operations occur within these blocks, the encoder cannot isolate individual pixel values efficiently without dedicating disproportionate bit budget to signaling block partitions. The overhead needed to accurately encode individual pixel variations often forces the rate-distortion optimization algorithms to smooth the entire block instead.

Better Alternatives for Small Icons

When serving low-resolution user interface elements and icons, alternative formats typically outperform lossy AVIF:

• SVG: Ideal for simple shapes and icons, providing infinite scalability with zero blur.
• PNG: The standard choice for raster icons, using lossless deflate compression that preserves exact pixel boundaries.
• Lossless WebP or Lossless AVIF: If a modern web format is required, using AVIF in full lossless mode with YUV444 (or RGB) color space bypasses the blur-inducing filters and subsampling, though file sizes will be comparable to optimized PNGs.