image-rendering

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

auto

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

smooth

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

high-quality

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

crisp-edges

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

pixelated

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

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

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

CSS

.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

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

Результат

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