RC RANDOM CHAOS

Chrome's JPEG shortcut makes tiny icons look wrong

· via Hacker News

Original source

Why tiny JPEGs look different in Chrome

Hacker News →

A developer noticed a 15px logo rendered thicker in Chrome than in Firefox, and traced it to how Chrome decodes JPEGs at small scales rather than to any bug. Fully decompressing a large JPEG only to shrink it wastes memory and CPU — a 2000×2000 image balloons to roughly 12MB in a bitmap when the final 20×20 result needs about 1.2KB. Chrome sidesteps that waste using an optimization built into libjpeg-turbo, which Skia (Chrome’s graphics engine) relies on for JPEG decoding.

The trick exploits how JPEG stores data. Compression splits images into 8×8 blocks and converts each into the frequency domain via a Discrete Cosine Transform, separating coarse low-frequency information from fine high-frequency detail. When an image is scaled down heavily, that high-frequency detail is discarded anyway, so the decoder can skip those coefficients entirely. This partial IDCT scaling decodes directly at fractions with a denominator of 8 — at one-eighth scale, only the constant (flat-color) component of each block survives, dropping all edge softening and gradients before a conventional downsampling pass finishes the job. That lost detail is why the icon looked heavier.

The author later corrected the post to note that the final downsampling algorithm also contributes, so the visible difference is a mix of both. The practical lesson: JPEG and its optimizations are tuned for photographs, not sharp-edged icons or logos. Use SVG or another format for those — the artifacts are a feature of a photo-oriented codec, not a browser defect.

Read the full article

Continue reading at Hacker News →

This is an AI-generated summary. Read the original for the full story.