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	Значение элемента наследуется от родительского элемента.