Свойство image-rendering

Справочник:

Вендорное свойство

Характеристики свойства

В каких браузерах работает?


-	10.0+	11.6+	-	3.6+	-	-

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	-

Для чего используется?

Специфическое свойство, посредством которого браузеру сообщается специальный алгоритм обработки картинки при ее масштабировании пользователем или настройками браузера. При этом в исходном положении изображение не будет меняться вне зависимости от установленного алгоритма. Трансформация вступит в силу только после изменения масштабирования рассматриваемого объекта.

Как правильно задавать?

image-rendering:значение;

Какие могут быть значения?

auto - передает право установки алгоритма интерполяции браузеру. В этом режиме используется optimizeQuality.
optimizeSpeed - изображение интерполируется по соседним пикселям, что значительно ускоряет загрузку изображения. Сохраняет основные качественные показатели.
optimizeQuality - служит инструментом повышения качества отображения рисунка благодаря способу бикубической обработки пикселей.
crisp-edges - усиливает резкость контурных линий и не допускает эффекта размытия.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство image-rendering</title>
  <style>
  .easyOptimize { border: 1px solid #ccc; }
   .niceOptimize {
    image-rendering: optimizeQuality;
   }
  </style>
 </head>
 <body>
  <p><img class="easyOptimize" src="images/some-picture.jpg  width="200">
  <img src="images/some-picture.jpg" width="200" class="niceOptimize {
    imatOptimize"></p>
 </body>
</html>

Тип CSS свойства:

Изображения