CSS свойство image-rendering

Свойство image-rendering устанавливает алгоритм изменения масштаба изображения.

По умолчанию браузеры применяют бикубический алгоритм (aliasing) к масштабированному изображению, чтобы предотвратить искажение, но это может быть проблемой, если хотите, чтобы изображение сохраняло свой оригинальный пикселизированный вид.

Значение по умолчанию auto
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Discrete.
Версия CSS3
DOM синтаксис object.style.imageRendering = "pixelated";

Синтаксис

image-rendering: auto | crisp-edges | pixelated | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .pixelated {
      image-rendering: pixelated;
      }
      .resize {
      width: 45%;
      clear: none;
      float: left;
      }
      .resize:last-of-type {
      float: right;
      }
      .resize img {
      width: 100%;
      }
      img {
      margin-bottom: 20px;
      width: 100%;
      }
      .original img{
      width: 20%;
      }
      body {
      background-color: #ccc;
      padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства image-rendering</h2>
    <div class="original">
      <p>Оригинальный размер изображения:</p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
    <div class="resize">
      <p><code>image-rendering: auto</code></p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
    <div class="resize">
      <p><code>image-rendering: pixelated</code></p>
      <img class="pixelated" src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
  </body>
</html>

Значения

Значение Описание
auto Стандартный алгоритм масштабирования изображения. Значение по умолчанию.
crisp-edges Значения изображения сохраняются без применения эффекта сглаживания или размытия.
pixelated Браузер сохраняет пикселизированный стиль, используя метод масштабирования ближайшего соседа.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
3.6 +

Практикуйте свои знания

Что делает CSS свойство 'image-rendering'?
Считаете ли это полезным?