Why tiny JPEGs look different in Chrome

The issue of tiny JPEGs appearing different in Chrome is due to a clever decoding optimization. Initially, one might think it's a rendering bug, but it's actually an intelligent approach taken by Chrome when handling JPEGs at small scales. When displaying a large JPEG image at a very small size, like 20×20, it's inefficient to fully decompress the entire image in memory.

Scaling down a 2000×2000 JPEG to 20×20 would require a bitmap of 12 MB, while the final image only needs around 1.2 KB. Most of the information in the original image is lost during this scaling process. The key insight here is that the lost information is not random; it primarily consists of high-frequency details. For instance, a tree with intricate leaves and bark would lose its fine details when scaled down, resulting in a simplified green blob for the foliage and a brown stick for the trunk.

Now, JPEG compression works by dividing images into 8×8 blocks and converting them into a frequency domain using a Discrete Cosine Transform (DCT). The lowest frequency represents a flat color, while the highest frequency resembles a checkerboard pattern with rapid value changes. During JPEG compression, the image is represented by coefficients that describe the presence of each frequency pattern.

When shrinking an image by a factor of 8, those 8×8 blocks can be represented by a single pixel in the downscaled image. At this size, the image predominantly needs low-frequency information, as high-frequency details tend to disappear. Instead of decompressing the entire JPEG, Chrome skips the high-frequency coefficients and decodes only the necessary ones for the coarse version of the image.

This results in a smaller, faster-to-uncompress image. For ratios other than fractions with a denominator of 8, Chrome uses partial IDCT scaling, which involves decoding the closest fraction with a denominator of 8 and then applying a traditional downsampling algorithm to reach the desired size. This optimization allows Chrome to decode less data when the target size is small, making the image appear thicker because it's rendered at one-eighth scale using partial IDCT scaling, skipping most of the high-frequency detail.