Why Tiny JPEGs Look Different in Chrome

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.

The work for decompressing at a lower scale in Firefox is happening here: https://bugzilla.mozilla.org/show_bug.cgi?id=2033250

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.

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.

You can over ride lib-jpeg-turbo with the moz-jpeg 'update' if you want much nicer jpeg things going on.

Mozilla wringed out more from JPEG for Meta/Instagram about a decade or so ago, and their library would be noteworthy in this article, for comparison. The basic idea was that JPEG was devised when CPU cycles were expensive and displays were analogue, meaning that only a limited effort was made to optimise, resulting in things like banding, that OG CRTs handled well, unlike modern digital displays (on systems with 1000000 more CPU).

Regardless of what tools you are using, going from 'gigapixels' to a thumbnail is going to be a two or more step process, with a colourful item rendered a grey mush, when you really needed some of the colours in the original.

Few respect the pixel blocks of JPEG (8 x 8) and most graphic artists have no knowledge of the powers of two. Once upon a time it was necessary to align image dimensions with important binary numbers, particularly if working with texture maps for early 3D graphics.

The other thing going on in the article is that practically every web screen should be considered 'retina' resolution, with everything apart from the lamest office PC having a pixel resolution equivalent to 1.5x the amount of pixels shown 'nominally'. If the web stats say '1280 x 720' as a oft-used resolution, regardless of device, that will be a 1920 x 1080 screen at 1.5x, with Chrome and other browsers packing in 1920 rather than 1280 pixels across, if the image has the pixels in it for that.

Been meaning to look into this

Not sure why one would use JPEG for a little digital icon anyway. It is indeed only acceptable for photos. SVG is a good choice for icons, PNG or WebP for other digital content.

Reminds me of digging into HTML Canvas scaling, especially when HiDPI Macs came out.

Would be nifty if they only did that partial scaling when there's little memory available.