3

I encountered strange behavior in Chrome v60.0 when I placed a downscaled image on top of itself and set the CSS image-rendering parameter to pixelated:

#container {
  position: relative;
  width: 160px
}

.image {
  width: 100%
}

.overlay {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  image-rendering: pixelated
}
<div id="container">
  <img class="image" src="http://www.publicdomaintreasurehunter.com/wp-content/uploads/2011/01/muscle.jpg">

  <img class="overlay" src="http://www.publicdomaintreasurehunter.com/wp-content/uploads/2011/01/muscle.jpg">
</div>

Rather than appearing pixelated, as expected, the image is smooth (and sharper than the original). Normally when pixelated is applied, the image looks quite grainy (see below).

You can test this by removing the 1st image in the container and comparing the result. Or removing the 2nd to see the default rendering.

One caveat, however. While it might work great for photos, there is jaggedness on some edges when artwork is used. One workaround is to go in between and apply an opacity of 0.4 or so on the overlayed image, giving at least some sharpness.

Any explanation for this behavior? It doesn't work in IE or any other browsers I've tried.

Example graphic showing: (1) default rendering, (2) with image-rendering, and (3) CSS hack

UPDATE: I tested this in the following 32-bit and 64-bit versions of Chrome and here are the results:

60.0.3112.113 (64-bit) - Works

60.0.3112.101 (64-bit) - Works

59.0.3071.86 (64-bit) - Works

58.0.3029.96 (64-bit) - Not necessary to use hack, since image-rendering: pixelated already displays the sharpened image without pixelation

58.0.3029.96 (32-bit) - Not necessary to use hack, since image-rendering: pixelated already displays the sharpened image without pixelation

57.0.2987.133 (64-bit) - Not necessary to use hack, since image-rendering: pixelated already displays the sharpened image without pixelation

56.0.2924.87 (64-bit) - Does not work

55.0.2883.75 (64-bit) - Does not work

53.0.2785.116 (32-bit) - Does not work

48.0.2564.109 (64-bit) - Does not work

TylerH
  • 20,799
  • 66
  • 75
  • 101
Ethanoid
  • 69
  • 1
  • 6
  • Tested on Windows 10 + Chrome 60.0.3112.113 and I can't tell any difference between pixelated vs overlay http://jsfiddle.net/7CURQ/314/ – Valentin Aug 25 '17 at 16:15
  • @Valentin Did it look like the very pixelated image given in the example? Did you try removing the 1st image from the code (the one with the "image" class)? It works for me in Windows 10 and 7, but my version of Chrome is slightly older, 60.0.3112.101. – Ethanoid Aug 25 '17 at 16:39
  • Couldn't reproduce the issue no matter what, could be a browser bug or an issue with your setup... – Valentin Aug 25 '17 at 21:19
  • @Valentin I've tried it on two different systems, which had identical versions of Chrome. Maybe it will be "fixed" with the next update. For my own benefit, when you run the example code, do you see the 1st or 2nd image? – Ethanoid Aug 25 '17 at 22:09
  • Both overlay and pixelated look the same for me, see [this image](http://imgur.com/a/oVPy3)... – Valentin Aug 26 '17 at 16:08
  • @Valentin Thanks, I appreciate it! I tested it with various versions of Chrome and posted the results in the question – Ethanoid Aug 26 '17 at 17:49

1 Answers1

3

This isn't unique to CSS. Noise/grain does tend to create an illusion of sharpness or enhanced detail due to the pixels making edges more pronounced, among other things. Many sharpening techniques end up increasing the amount of noise, which is usually an undesired side effect, though very careful and very subtle application of noise to an image can create this illusion without noticeably degrading image quality.

See also: Why is there the illusion of detail in photographic noise?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    It's not that simple. This is a browser quirk and the question is why this is happening. It can't be attributed to noise/grain since images without any noise (such as artwork) produce the same effect. – Ethanoid Aug 25 '17 at 14:04