Как веб-разработчики, мы постоянно играем с изображениями, и в большинстве случаев браузеры отлично масштабируют изображения, чтобы соответствовать границам дизайна нашего сайта, сохраняя при этом их привлекательность. Но что делать, если вы хотите контролировать, как браузер масштабирует изображения на вашей странице?
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 (она оставлена открытой для реализации значения crisp-edges. Отметьте задачу звездочкой, чтобы отслеживать реализацию).