Comments on: image-rendering https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 13 Sep 2021 22:40:51 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Ethan https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1652298 Fri, 21 Sep 2018 15:49:49 +0000 http://css-tricks.com/?page_id=197696#comment-1652298 In reply to moon.

image-rendering: -webkit-optimize-contrast;
AND
image-rendering: crisp-edges;
Will both work in Chrome.
In fact crisp-edges is likely to give the image a moire effect in Windows.
The webkit-optimize-contrast renders better in Chrome and will override crisp-edges.

]]>
By: adamcalihman https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1650897 Sun, 05 Aug 2018 09:06:05 +0000 http://css-tricks.com/?page_id=197696#comment-1650897 In reply to Peter.

Been a while since this was posted but thought I’d answer anyway. Just like the above article implies, the easiest and most basic way to implement this is to put your css code into your main stylesheet under the “img” selector. If in WordPress that would be in your theme’s primary style.css.

img {
image-rendering: -moz-crisp-edges; /* Firefox /
image-rendering: -o-crisp-edges; / Opera /
image-rendering: -webkit-optimize-contrast;/ Webkit (non-standard naming) /
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; / IE (non-standard property) */
}

]]>
By: Mark https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1613592 Thu, 07 Dec 2017 09:45:28 +0000 http://css-tricks.com/?page_id=197696#comment-1613592 In reply to Sam Keddy.

Exactly, what’s this…

My website development this week: Developing hate for Microsoft Edge
It keeps crashing on me and resized images look awful, when you look at the Edge suggestions it’s there but it’s in consideration to fix this since 2015!

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7902426-image-rendering-pixelated

]]>
By: Sam Keddy https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1612229 Wed, 04 Oct 2017 15:56:56 +0000 http://css-tricks.com/?page_id=197696#comment-1612229 Complete lack of support in Edge. Thanks Microsoft. Guess I’ll just tell my users to download a different browser.

]]>
By: Iggy https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1611911 Tue, 19 Sep 2017 15:48:14 +0000 http://css-tricks.com/?page_id=197696#comment-1611911 In reply to moon.

Works for me in chrome

]]>
By: moon https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1611586 Mon, 04 Sep 2017 13:22:47 +0000 http://css-tricks.com/?page_id=197696#comment-1611586 Image-rendering: -webkit-optimize-contrast doesn’t works in Chrome now. I don’t know why.

]]>
By: Nilanjon https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1610370 Tue, 18 Jul 2017 03:57:50 +0000 http://css-tricks.com/?page_id=197696#comment-1610370 This would have been such a great feature; however, once again browser difference makes one feel outdated!

]]>
By: Peter https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1610007 Thu, 06 Jul 2017 11:55:08 +0000 http://css-tricks.com/?page_id=197696#comment-1610007 Hi there,
I came across your website while looking for a solution to my problem with blurry images in WordPress. They are blurry only in Chrome, IE and Firefox display them as they should look like…

On the forum I’ve found that:

image-rendering: -moz-crisp-edges; /* Firefox /
image-rendering: -o-crisp-edges; /
Opera /
image-rendering: -webkit-optimize-contrast;/
Webkit (non-standard naming) /
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /
IE (non-standard property) */

Where exactly should I put it to apply the code to all images on my WP page and will that fix the blurriness in Chrome?

Thanks,
Peter

]]>
By: Christian https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1608969 Sat, 03 Jun 2017 12:04:01 +0000 http://css-tricks.com/?page_id=197696#comment-1608969 Why are vendor prefixes used, when you make it seem like image-rendering: pixelated; is all you need? Your QR-Code example CSS says:

.pixelated {
  image-rendering: pixelated;
}

But when you inspect it with a webbrowser’s developer tools it says:

.pixelated {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

Also the Browser support table lists Opera red (unsupported), but IE yellow (partially supported). It should be the other way around, like the text in the table says.

]]>
By: Lasse https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1599372 Fri, 29 Jan 2016 11:49:28 +0000 http://css-tricks.com/?page_id=197696#comment-1599372 In reply to Colby.

You’ve got it backwards. Aliasing is what happens when a signal is digitized and values close to each other become the same value because the digital resolution simply doesn’t allow anything to exist “between” the pixels or sample points. Anti-aliasing is what’s done to combat this.

https://en.wikipedia.org/wiki/Aliasing

]]>
By: Colby https://css-tricks.com/almanac/properties/i/image-rendering/#comment-1598361 Tue, 01 Dec 2015 18:09:57 +0000 http://css-tricks.com/?page_id=197696#comment-1598361 You say ” In this example Chrome will remove the default anti-aliasing:” But wouldn’t it be called ‘aliasing’. Aliasing technically is a blending of two different things together on the edges of those things right? So the browser performs ALIASING on images that are scaled up right? Just a a little confused. Thanks

]]>