search

garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.71k stars 603 forks source link

Use img { image-rendering: pixelated } #1097

Open romanzenka opened 5 years ago

romanzenka commented 5 years ago

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 commented 5 years ago

Does this also work for antialiased text?

romanzenka commented 5 years ago

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": image Everything is blurry, hard to see what is going on

After "pixelated": image 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 commented 5 years ago

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.