image-rendering
Обновлено: 21.12.2022
image-rendering
Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.
Краткая информация
| Значение по умолчанию | auto |
| Наследуется | Да |
| Применяется | К изображениям, фоновым картинкам, <video>, <canvas> |
| Анимируется | Нет |
Синтаксис
image-rendering: auto | crisp-edges | pixelatedЗначения
| auto | Браузер применяет встроенный в него алгоритм интерполяции, обычно используется бикубический метод. |
| crisp-edges | Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв. |
| pixelated | При увеличении размера картинки сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. При уменьшении размеров аналогичен auto. |
Пример
В данном примере две картинки с шириной 30 пикселей увеличиваются до 200 пикселей с использованием разных алгоритмов.
Примечание
Internet Explorer поддерживает нестандартное свойство -ms-interpolation-mode.
Safari до версии 10 поддерживает свойство -webkit-image-rendering.
Firefox поддерживает значение -moz-crisp-edges.