Странный CSS-хак для повышения резкости изображений (только Chrome 59 и 60)

Question

Я столкнулся со странным поведением в Chrome v60.0, когда я поместил уменьшенное изображение поверх себя и установил CSS image-rendering параметр для 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>

Вместо того, чтобы казаться пикселированным, как и ожидалось, изображение будет гладким (и более резким, чем оригинал). Обычно когда pixelated применяется, изображение выглядит довольно зернистым (см. ниже).

Вы можете проверить это, удалив 1-е изображение в контейнере и сравнив результат. Или удалите 2nd, чтобы увидеть рендеринг по умолчанию.

Одно предостережение, однако. Несмотря на то, что он может отлично работать с фотографиями, на некоторых краях возникают неровности при использовании иллюстраций. Один из обходных путей заключается в том, чтобы перейти между ними и применить непрозрачность 0,4 или около того к наложенному изображению, что дает по крайней мере некоторую резкость.

Есть ли объяснение этому поведению? Это не работает в IE или любых других браузерах, которые я пробовал.

ОБНОВЛЕНИЕ: я проверил это в следующих 32-битных и 64-битных версиях Chrome, и вот результаты:

60.0.3112.113 (64-разрядная версия) - Работает

60.0.3112.101 (64-разрядная версия) - Работает

59.0.3071.86 (64-разрядная версия) - Работает

58.0.3029.96 (64-разрядная версия) - не обязательно использовать хак, так как image-rendering: pixelated уже отображает заостренное изображение без пикселизации

58.0.3029.96 (32-разрядная версия) - не обязательно использовать хак, так как image-rendering: pixelated уже отображает заостренное изображение без пикселизации

57.0.2987.133 (64-разрядная версия) - не обязательно использовать хак, так как image-rendering: pixelated уже отображает заостренное изображение без пикселизации

56.0.2924.87 (64-разрядная версия) - не работает

55.0.2883.75 (64-разрядная версия) - не работает

53.0.2785.116 (32-разрядная версия) - не работает

48.0.2564.109 (64-разрядная версия) - не работает

Answer 1

Это не уникально для CSS. Шум / зернистость имеет тенденцию создавать иллюзию резкости или повышенной детализации из-за пикселей, делающих края более выраженными, среди прочего. Многие методы повышения резкости в конечном итоге увеличивают количество шума, что обычно является нежелательным побочным эффектом, хотя очень осторожное и очень тонкое применение шума к изображению может создать эту иллюзию без заметного ухудшения качества изображения.

Смотрите также: Почему в фотографическом шуме присутствует иллюзия деталей?