рендеринг изображения: пиксельный

Как веб-разработчики, мы постоянно играем с изображениями, и в большинстве случаев браузеры отлично масштабируют изображения, чтобы они соответствовали границам дизайна нашего сайта, сохраняя при этом изображения красивыми. Но что произойдет, если вы захотите контролировать масштабирование изображений на вашей странице в браузере?

В 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 (он оставлен открытым для реализации значения четких краев. Отметьте выпуск, чтобы отслеживать реализацию).