Use img { image-rendering: pixelated }

[romanzenka]

Chrome automatically applies smoothing when drawing images to screen when in retina mode while the image was captured non-retina.

Since backstop's goal is to compare images, the smoothing is counterproductive. I am not seeing what the browser actually rendered - I get a blurred version instead.

The img { image-rendering: pixelated } style makes the image comparison render much crisper.

I am currently applying this style in DevTools, but I figure this could be done automatically by backstop.js.

[garris]

Does this also work for antialiased text?

[romanzenka]

Sadly, Chrome does not seem to support switching off font anti-aliasing, see https://stackoverflow.com/questions/18786829/webkit-font-smoothing-property-has-no-effect-in-chrome

I am after changing how reference/test/diff images get displayed in the HTML report in the browser:

Before "pixelated":

Everything is blurry, hard to see what is going on

After "pixelated":

Now I can actually see nice, square pixels in the image and understand what is going on somewhat better.

This is from Mac OS X retina display, capture was done on a non-retina Puppeteer, but in my experience, even displaying images with matching dpi, Chrome still smooths the pixels anyway.

[romanzenka]

I am realizing - this would make sense to enable only if the image takes more pixels in the browser than it has itself. If you are shrinking the image, switching off anti-aliasing might make some of the pink difference pixels disappear, confusing the user.