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

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

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

TIP

Иногда можно использовать crisp-edges и pixelated взаимно в качестве резервных вариантов, чтобы обеспечить одинаковое отображение в разных браузерах.

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

Синтаксис

Синтаксис CSS image-rendering

css

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

Пример использования свойства image-rendering:

Пример кода CSS image-rendering

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .resize {
        flex: 1 1 45%;
      }
      .resize img, .original img {
        width: 100%;
        display: block;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering property example</h2>
    <div class="wrapper">
      <div class="original">
        <p>Original image size:</p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: auto</code></p>
        <img src="https://www.w3docs.com/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="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS image-rendering values list

Значения

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

Практика

Каково назначение свойства 'image-rendering' в CSS?

Оно изменяет размер изображения.Оно задаёт алгоритм отображения изображения.Оно изменяет цвет фона изображения.Оно позволяет растровым изображениям выглядеть более чёткими при масштабировании.Оно создаёт рамку вокруг изображения.

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

Синтаксис ​

Пример использования свойства image-rendering: ​

Результат ​