Weird CSS hack for sharpening images (Chrome 59 an

问题:

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.

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

回答1:

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?