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.

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) */
}

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

Works for me in chrome

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

.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.

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