Image quality setting: image-rendering
Posted: 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
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