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

Определение и использование

image-rendering Атрибут определяет тип алгоритма, используемого для масштабирования изображений.

Обратите внимание:Этот атрибут не действует на изображения, не масштабируемые.

Пример

Показывает различные алгоритмы, доступные для масштабирования изображений:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Попробуйте сами

CSS-синтаксис

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

Значение атрибута

Значение Описание
auto Позволяет браузеру выбрать алгоритм масштабирования. Значение по умолчанию.
smooth Использует алгоритм для сглаживания цветов в изображении
high-quality Как и smooth, но предпочитает высококачественное масштабирование
crisp-edges Использует алгоритм для сохранения контрастности и краев в изображении
pixelated

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

Если изображение уменьшается, то оно такое же, как и auto.
initial Этот атрибут устанавливается в его значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется из родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: auto
Инheritability: да
Создание анимации: Не поддерживается. См. также:Свойства, связанные с анимацией.
Версия: CSS3
JavaScript-синтаксис: object.style.imageRendering = "pixelated"

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

Числа в таблице представляют собой версии первых браузеров, полностью поддерживающих этот атрибут.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge и Opera используют -webkit-optimize-contrast в качестве синонима значения crisp-edges.