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

Свойство image-rendering CSS задаёт алгоритм масштабирования изображения. Свойство применяется к самому элементу, к любым изображениям, заданным в его других свойствах, а также к его потомкам.

Пользовательский агент масштабирует изображение, если автор страницы задаёт размеры, отличные от его естественного размера. Масштабирование также может происходить в результате взаимодействия с пользователем (изменения масштаба). Например, если естественный размер изображения — 100×100px, а его фактические размеры — 200×200px (или 50×50px), изображение будет увеличено (или уменьшено) с использованием алгоритма, заданного свойством image-rendering. Это свойство не влияет на изображения без масштабирования.

Попробуйте

image-rendering: auto;

image-rendering: smooth;

image-rendering: crisp-edges;

image-rendering: pixelated;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/lizard.png" />
</section>

#example-element {
  height: 480px;
  object-fit: cover;
}

Синтаксис

/* Keyword values */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Алгоритм масштабирования зависит от пользовательского агента. Начиная с версии 1.9 (Firefox 3.0), Gecko использует билинейную передискретизацию (высокое качество).

smooth

Изображение следует масштабировать алгоритмом, который обеспечивает наилучший внешний вид изображения. В частности, допустимы алгоритмы масштабирования, которые «сглаживают» цвета, например билинейная интерполяция. Это предназначено для таких изображений, как фотографии.

crisp-edges

Изображение масштабируется алгоритмом, например методом «ближайшего соседа», который сохраняет контрастность и чёткость краёв изображения. Обычно это предназначено для таких изображений, как пиксельная графика или линейные рисунки; размытие и сглаживание цветов не выполняются.

pixelated

Изображение масштабируется методом «ближайшего соседа» или аналогичным алгоритмом до ближайшего целого кратного исходного размера, после чего для достижения конечного требуемого размера применяется плавная интерполяция. Это предназначено для сохранения «пиксельного» вида без артефактов масштабирования, когда увеличенное разрешение не кратно исходному.

Формальное определение

Формальный синтаксис

image-rendering = 
  auto |
  crisp-edges |
  pixelated |
  smooth

Примеры

Задание алгоритмов масштабирования изображений

В этом примере изображение повторяется четыре раза, и для каждого экземпляра задано своё значение image-rendering.

<div>
  <img
    class="auto"
    alt="A small photo of some white and yellow flower against a leafy green background. The image is about 33% smaller than the size it is being displayed at. This upscaling causes the image to appear blurry, with notable soft edges between objects."
    src="blumen.jpg" />
  <img
    class="smooth"
    alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the smooth value for the image-rendering property display the image with the maximize appearance."
    src="blumen.jpg" />
  <img
    class="pixelated"
    alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the pixelated value for the image-rendering property display the image as very pixelated. Individual pixels are clearly visible and edges appear much sharper."
    src="blumen.jpg" />
  <img
    class="crisp-edges"
    alt="The same photo as the previous images, which is also being upscaled the same amount. Browsers that support the crisp-edges value for the image-rendering property display the image as very pixelated. In these examples, there is virtually no perceivable difference between the pixelated and crisp-edges versions."
    src="blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

.auto {
  image-rendering: auto;
}

.smooth {
  image-rendering: smooth;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• object-fit
• object-position
• image-orientation
• image-resolution
• Модуль CSS Images
• Атрибут SVG image-rendering