Join the discussion
Write your take first — we'll ask for email only when you're ready to publish.
- Hacker News
- Reminds me of digging into HTML Canvas scaling, especially when HiDPI Macs came out.by bluedino
- The DCs giving you a 1/8 downscale is well known, but the interesting part to me was this generalizes so you can get 1/4 (resp. 1/2) downscales by using only the 2x2 (resp. 4x4) block of LF coefficients.by edflsafoiewq
- This is even more interesting (full disclosure - I vibecoded a lib for it lately - lowzag) when you take into consideration working set restrictions.
In almost every case, downscaling-while-decoding is going to beat decode-then-scale on performance - merely keeping the uncompressed image in RAM is going to cost you, when you can scale it down in L1 or even vector registers.
by qdotme - 15px suggests that using an ICO file, horrifying as that sounds, might be a very successful solution here. Yes, I know PNG and GIF would also work, but if ICO format is still support for favicons at multiple resolutions with clean scaling, then wouldn’t it be support for doc images as well?by altairprime
- Sometimes you can control this with the “image-rendering” CSS attribute. It lets you control the scaling algorithm used. Different browsers seem to choose the algorithm in different ways. Came across this when an image looked different between two browsers, but only on high DPI monitors.by gwittel
- 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.by LoganDark
- Yes! for a bit of backstory, it was an internal icon on a prototype that we were polishing up. So I get why the person did it at the time, running after the svg would have been too much effort for something that might have been tossed in the end.by gutechh
- If you care about the rendered quality, you should never use the browser itself to downscale images. Browsers don’t consistently use the state-of-the-art algorithm for downscaling, which is Lanczos 3-lobe. This is independent of partial IDCT. Browsers generally favor performance. And the algorithm chosen could even depend on the specific GPU in use.
That said if you are using the web to develop UI, it’s accepted that different browsers and users get slightly different renderings, unless you write your own image renderer with canvas. If you do care that much you should probably write native code.
by kccqzy - I'm actually curious if nowadays some ML-based algorithms are not beating Lanczos 3-lobe to it - at least in perceptual quality of the downscale. The have /long/ surpassed it in upscaling.by qdotme
- Also the pixels were probably downscaled in sRGB gamma by JPEG instead of linear light, so the overall brightness will be wrong anyway, if there was lots of high-frequency content in the original.by Matumio
- 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.by PetitPrince
- Ah! It took a fair bit of digging to get there. Maybe I'll look into the firefox pipeline and make another post. In the mean time if anyone know the internals and how firefox does it, I'm eager to hear about it!by gutechh
- Firefox doesn't decode the image into a full-resolution buffer and then downscale either, instead it does a streaming decode and applies downscaling on the fly. They call it downscale-during-decode[0]. I guess it doesn't do partial decoding of the 8x8 blocks though.by the8472
- 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.
by Theodores - 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.by debazel
- I do prefer the firefox look too! I'd be curious to hear your take on what could be the root cause of this. I'm far from a image rendering expert. But I remember when inspecting the edges and curves of the images in a DCT visualizer they were all in the AC coefficients which is what led me to the conclusion of the post.by gutechh
- I've noticed that a lot of objective measures of image quality prefer blur to ringing, but many subjective measurements tilt the other way.by aidenn0
- The work for decompressing at a lower scale in Firefox is happening here: https://bugzilla.mozilla.org/show_bug.cgi?id=2033250by muizelaar
- Thanks, I knew it was much more efficient, but seeing the numbers in the benchmarks make me appreciate this "trick" even more!by gutechh
- Wow, this explains an issue I ran into for images from a certain vendor when we used idct scaling for the same reason:
Some encoders (and a meaningful share of JPEGs in the wild) leave zeros or garbage in the unused rows/columns of the trailing MCU. At full-size decode those samples are cropped away, but IDCT scaling mixes them into neighboring output pixels and the artifacts become visible. See https://crbug.com/890745 and https://github.com/libjpeg-turbo/libjpeg-turbo/issues/297
In our particular case we were able to just crop out the edges and it was worth the tradeoff
by adzm - > 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.
by advisedwang - > using a 2000x2000 image for a icon displayed 20x20 is a waste
The number of web sites that do this is enraging.
by ryandrake - 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.
- You were using bitmap icons that were more than 8x larger on each axis than necessary? Why?by StilesCrisis
- Ah this is weird! My understanding is that png doesn't store the images like jpg at all, they use a palette of all the colors in the image. Then each pixel is a reference to this palette. So it's not IDCT scaling, but I imagine there are other tricks to save on space/cpu when decoding pngs.by gutechh
- Chrome puts artifacts in its canvas when you draw text and Firefox does not. Makes bitmap fonts ugly.
https://stackoverflow.com/questions/47139528/html5-canvas-te...
My inner paranoiac says it is something like yellow dots[0] for browsers but it could just be negligent developers.
by RunSet - > 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.
What do you mean by "named the same" here?
by jancsika - its not possible to do this for pngs. Most likely though chrome is just using a quicker downscaling algorithm than your graphics editor is using (or just the wrong one. There is no universally correct algorithm, different ones work better for different image types).
Have you tried adjusting the image-rendering css property?
by bawolff - I don't think it's possible to partially decode/render a PNG in a way similar to JPEG. The only exception I can think of is adam7 interlacing, which _does_ store the initial pass as 8x8 blocks, but I'm pretty sure PNGs with adam7 are rare in practice because they do result in larger files.by polpo