image-rendering
Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.
Краткая информация
Значение по умолчанию | auto |
---|---|
Наследуется | Да |
Применяется | К изображениям, фоновым картинкам, <video>, <canvas> |
Анимируется | Нет |
Синтаксис
image-rendering: auto | crisp-edges | pixelated
Значения
- auto
- Браузер применяет встроенный в него алгоритм интерполяции, обычно используется бикубический метод.
- crisp-edges
- Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв.
- pixelated
- При увеличении размера картинки сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. При уменьшении размеров аналогичен auto.
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image-rendering</title> <style> img { border: 1px solid #ccc; } .fast { image-rendering: pixelated; } </style> </head> <body> <p><img src="image/russia.png" alt="Флаг России" width="200"> <img src="image/russia.png" alt="Флаг России" width="200" class="fast"></p> </body> </html>
В данном примере две картинки с шириной 30 пикселей увеличиваются до 200 пикселей с использованием разных алгоритмов.
Примечание
Internet Explorer поддерживает нестандартное свойство -ms-interpolation-mode.
Safari до версии 10 поддерживает свойство -webkit-image-rendering.
Firefox поддерживает значение -moz-crisp-edges.
Спецификация
Спецификация | Статус |
---|---|
CSS Image Values and Replaced Content Module Level 3 | Возможная рекомендация |
Браузеры
auto | 41 | 28 | 6.1 | 3.6 | ||
crisp-edges | 6.1 | 3.6 | ||||
pixelated | 41 | 28 | 10 |
auto | 4.1 | 3.6 | 37 | 7.1 |
crisp-edges | 3.6 | 37 | 7.1 | |
pixelated | 4.1 | 37 | 10.2 |