Chrome's Clever JPEG Decoding Trick Makes Tiny Images Look Different
Why Tiny JPEGs Look Different in Chrome
A developer noticed a logo rendered slightly thicker in Chrome than in Firefox. The culprit isn't a bug but a performance optimization: when scaling JPEGs down, Chrome uses partial IDCT scaling via libjpeg-turbo, decoding only low-frequency data. This skips high-frequency details that would be lost anyway, saving memory and time, but can alter the appearance of small images. The article explains how JPEG's frequency-domain encoding makes this possible and advises against using JPEG for icons.
Because it was rendered so small, it was decoded at one-eighth scale using partial IDCT scaling, so the only data from the frequency representation that remained was the constant component; all the edge softening and gradients were not used.
- jonathanlydall
I'm pretty sure the same issue happens with PNGs, which being lossless are generally good for icons as they don't land up with compression artifacts like what happens in JPEGs (which the author points out are really for photographs), they also support alpha blending.
When Chrome introduced this "optimization" and it made it through to an Electron release which we were upgrading to, it really messed up the icons in a lot of places in our product such that we had to hold off the upgrade until we had SVGs to replace them.
SVGs also have the advantage of being able to respond to light/dark mode. We just needed to put each icon in its own shadow DOM to avoid styles clashing between the different SVGs if they happen to be named the same which was a bit of an annoyance for our graphic designer.
- advisedwang
> Really, the moral here is that you should not use JPEG for icons and the like
And, more importantly, you should use images that are an appropriate resolution for the size they will be displayed. Even if you switch to PNG, using a 2000x2000 image for a icon displayed 20x20 is a waste.
- muizelaar
The work for decompressing at a lower scale in Firefox is happening here: https://bugzilla.mozilla.org/show_bug.cgi?id=2033250
- debazel
Chrome and Firefox uses two different scaling algorithms that is probably contributing a lot more to this difference. Chrome is more blurry in general while Firefox is sharper but has slightly more ringing artifacts. Personally I prefer the Firefox version.
- PetitPrince
So is Firefox doing a full rendering then scaling, or is it also doing a partial rendering but in another way? You're only telling one side of the story.