Chrome's JPEG Decoding Optimization Explains Rendering Differences in Small Images

Observation of Rendering Discrepancies

A user observed that a logo rendered at 15px appeared thinner and more faithful to the original on a colleague's computer using Firefox, while it looked thicker in Chrome. This difference was initially perceived as a rendering bug.

Chrome's JPEG Optimization

Investigation revealed that Chrome employs a specific optimization when rendering JPEGs at small scales. Instead of fully decompressing a large image and then scaling it down, Chrome's method is designed to be more efficient, particularly for heavily scaled images.

Efficiency of Scaling Down Images

The traditional method of decompressing a large JPEG (e.g., 2000x2000 pixels) into memory before scaling it down to a small size (e.g., 20x20 pixels) is inefficient. A 2000x2000 image requires approximately 12 MB of memory when uncompressed, while the final 20x20 image only needs about 1.2 KB. Most of the original image data is discarded during this process.

Loss of High-Frequency Detail

When an image is significantly scaled down, the information that is lost is primarily high-frequency detail. This includes fine textures and rapid pixel-to-pixel changes. For example, a detailed tree scaled down to a tiny size appears as a simple green blob and brown stick, losing its intricate leaf and bark details. Chrome's optimization leverages this fact by selectively discarding this detail earlier in the rendering pipeline.