Search…

X3 Photo Gallery Support Forums

Search…
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Image quality setting: image-rendering

21 Feb 2021, 09:48

Hi Karl

Recently I noticed that my logo (png file, 300x300px in original size, embedded with 150x150px for retina support) looked a bit blurry in Chrome - in contrast to Firefox and IE 11 (all tests done on Windows 10).

I did some research on the web and found the following CSS:

img {
    image-rendering: -webkit-optimize-contrast;
}

After applying the above code my logo instantly looked better in Chrome and is now as sharp as in Firefox and IE. 
In addition, the small JPG files of the X3 example content (e.g. Grid Layout) also look better and are now tag sharp.

Why is this setting not set as default for X3? 
Are there any drawbacks I am not aware of?
And what settings do you recommend for the other browsers on the market to achieve tag sharp logos/icons (png) and images (jpg)?

Thanks,
Tom
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality setting: image-rendering

21 Feb 2021, 11:19

This is news to me. As far as my knowledge takes me, modern browsers will always render at "best", with options to downgrade to "crisp-edges" and "pixelated", which may render faster, but cause lower quality. Image-rendering CSS overview:
https://developer.mozilla.org/en-US/doc ... -rendering

According to the docs above, the best options for "quality" are  "smooth" and "high-quality" (although both experimental). In my browser, there is definitely no difference between "auto" (default) and "-webkit-optimize-contrast":
Image

According to the below link, -webkit-optimize-contrast is the same as setting "pixelated", which is generally lower quality scaling, at least for photographic images:
https://css-tricks.com/almanac/properti ... rendering/

I tried in browser, and I see no evidence from testing or from searching other topics, that the option you suggest provides "better" quality for photographic images. This would not be logical either, as modern browser would already optimize images for quality automatically. Why shouldn't they?

In the link below that I found on search, it showcases the effects of -webkit-optimize-contrast, which is definitely the same as "optimizespeed" (not quality) and "pixelated" (not best bicubic scaling). As you can see, when an image is scaled UP, it retains it's pure pixelation.
http://phrogz.net/tmp/canvas_image_zoom.html

I did some tests in my own browser. Setting -webkit-optimize-contrast had no effect, while image-rendering: pixelated created a sharper, but more pixelated image. Some (photo owners) might argue their scaled down photos look better, but this is not what browsers think. It uses bicubic (advanced scaling) by default to create, what the browser believes, is the best quality resize.

Considering the above, I see no reason this should be considered "better quality". Perhaps in the case of scaled graphic-style images like logos and graphics? Yes maybe. It's not something I would consider applying by default.
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Re: Image quality setting: image-rendering

21 Feb 2021, 12:02

Hi Karl,

If I compare the logo on my website with "-webkit-optimize-contrast" in contrast to "auto" I can clearly see a difference regarding sharpness (at least on my 4K screen): The text below the logo is much sharper with "-webkit-optimize-contrast" and as good as in Firefox. So I will use this setting at least for png files and do some more testing with real photos (jpg), where the difference is more subtle. 

Which OS did you use? Maybe this is OS specific? I'm on Windows 10.

Best,
Tom
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality setting: image-rendering

22 Feb 2021, 00:36

tbp wrote:Which OS did you use? Maybe this is OS specific? I'm on Windows 10.
Yes, I'm on Mac, and it almost certainly differs between both browsers and OS. I am pretty sure however that all browsers have image-rendering generally tweaked to create the best quality scaling, at least as far as the browser manufacturer believes. Anything else would create a stir. I can imagine that it may create better results for logo/graphic style images (like PNG) ... However, I would definitely TEST on multiple OS/screens/browsers ... For example, if you are on a hiDPI (2X retina) screen, unless your logo is 2X the actual display size on screen, it will look "blurry" by default. This is natural, because you are scaling the image beyond the pixel-resoluton of screen, and increasing "pixelation" or "contrast" might make it look better, but it's not the "solution". Just saying ...