Как веб-разработчики, мы постоянно играем с изображениями, и в большинстве случаев браузеры отлично масштабируют изображения, чтобы они соответствовали границам дизайна нашего сайта, сохраняя при этом их привлекательность. Но что произойдет, если вы захотите контролировать масштабирование изображений на вашей странице в браузере?
В Chrome 41 (бета-версия выпущена в январе 2015 г.) представлено новое свойство CSS image-rendering: pixelated ( Spec ), которое дает вам немного больше контроля над тем, как браузер отображает увеличенное изображение.
Свойство CSS image-rendering и значение pixelated интересны тем, что они отключают стандартное плавное масштабирование браузера (обычно билинейную интерполяцию) и заменяют его другим алгоритмом масштабирования (в большинстве случаев ближайшим соседом) при изменении размера изображений.
Представьте, что у вас есть изображение размером 2×2 пикселя, и вы масштабируете его до 100×100 пикселей, браузер будет отображать его так, чтобы оно не выглядело блочным. Что-то вроде:
Во многих случаях такое сглаживание нежелательно и вместо этого используется метод, сохраняющий более точное представление изображения.
Чтобы получить этот эффект, вы просто применяете image-rendering: pixelated; к вашему изображению следующим образом.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Попробуйте демо . Как видите, применение свойства оказывает существенное влияние на то, как отображается изображение.
Это свойство можно применить во многих местах:
-
<img>элементы -
<canvas style="image-rendering: pixelated">элементы - Любой элемент со свойством
background-image
Я до сих пор не понимаю. Где мне это использовать?
Если вы просто показываете фотографии на своем сайте, то, вероятно, вам это не нужно.
Отличный вариант использования — игры, вам часто приходится масштабировать холст, чтобы он правильно соответствовал размеру экрана. До этого свойства CSS браузер интерполировал холст таким образом, что он выглядел размытым (см. ниже [sic]).
Если вы создаете инструмент для продажи авиабилетов или приложение, отображающее QR-коды , то пользователю часто потребуется полноэкранный режим, чтобы его было легче сканировать, поэтому контроль рендеринга изображений имеет решающее значение.
Если вы заинтересованы в реализации, ознакомьтесь с выпуском 317991 (он оставлен открытым для реализации значения четких краев. Отметьте выпуск, чтобы отслеживать реализацию).