Geek Answers Handbook

Weird CSS hack for sharpening images (Chrome 59 and 60 only)

I encountered unusual behavior in Chrome v60.0 when I placed the thumbnail on top of me 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>

Instead of an apparent pixel image, as expected, the image is smooth (and sharper than the original). Usually, when pixelated is applied, the image looks rather grainy (see below).

You can verify this by deleting the 1st image in the container and comparing the result. Or delete the second one to see the default rendering.

One caveat, however. Although this may work great for photographs, there are scratches on some edges when using artwork. One way is to switch between them and apply an opacity of 0.4 or so to the overlay image, which gives at least some sharpness.

Any explanation for this behavior? It does not work in IE or other browsers I 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) - No need to use hack since image-rendering: pixelated already displays a pointed image without pixelation

58.0.3029.96 (32-bit) - No need to use hack since image-rendering: pixelated already displays a pointed image without pixelation

57.0.2987.133 (64-bit) - No need to use hack since image-rendering: pixelated already displays a pointed 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
source share
1 answer

This is not unique to CSS. Noise / grain tends to create the illusion of sharpness or increased detail due to the fact that pixels make edges more pronounced, among other things. Many sharpening methods ultimately increase the amount of noise, which is usually an undesirable side effect, although a very careful and very subtle application of noise to the image can create this illusion without noticeable degradation in image quality.

See also: Why is there an illusion of detailing photographic noise?

+1
source

More articles:


All Articles