Why Tiny JPEGs Look Different in Chrome
Conversation activity · last 15 hours peak 2/30m
Clustered from 16 items across 4 sources. Not yet parsed — the coverage below is the raw record.
Press coverage 1
Social posts 3
Voices from the web unedited
-
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…
-
🌘 為什麼微小的 JPEG 圖片在 Chrome 中看起來不太一樣 ➤ 揭開 Chrome 瀏覽器極速影像解碼背後的視覺代價 ✤ https:// guillaumetech.github.io/posts/ jpg-scaling-chrome/ 本文探討了微小 JPEG 圖片在 Chrome 中渲染時顯得較粗且失真的原因。作者深入研究後發現，這並非渲染錯誤，而是 Chrome 採用的影像解碼優化機制。Chrome 將解碼工作委託給使用 libjpeg-turbo 的 Skia 圖形庫，當圖片被大幅縮小時，系統會啟用「部分反離散餘弦變換縮放」（partial IDCT…
-
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.[0]
-
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…
-
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?
-
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.
-
> Really, the moral here is that you should not use JPEG for icons and the likeAnd, 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.
-
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.
-
> 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?
-
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.