CSS свойство image-rendering
Узнайте, как CSS свойство image-rendering управляет масштабированием пикселей. Значения auto, pixelated и crisp-edges с примерами и поддержкой браузеров.
CSS свойство image-rendering указывает браузеру, какой алгоритм масштабирования использовать, когда изображение отображается в размере, отличном от его естественного (встроенного) разрешения. Оно управляет тем, как интерполируются пиксели — а не тем, масштабируется ли изображение вообще.
На этой странице объясняется, что делает каждое значение, когда использовать pixelated вместо crisp-edges, как справляться с различиями браузеров, и приведены рабочие примеры.
Когда это нужно?
По умолчанию браузер применяет плавную интерполяцию (билинейную или бикубическую) при масштабировании изображения вверх или вниз. Это отлично подходит для фотографий, но размывает изображения, которые должны оставаться чёткими попиксельно. Используйте image-rendering, когда:
- Вы увеличиваете пиксельную графику, ретро-спрайты игр или 8-битные иконки и хотите сохранить блочные пиксели вместо их размытия.
- Вы увеличиваете QR-код, штрих-код или техническую диаграмму, где каждый пиксель несёт смысл.
- Вы намеренно масштабируете изображение низкого разрешения и предпочитаете чёткие жёсткие края вместо мягкого, мутного результата.
- Вы создаёте игру на основе canvas и хотите, чтобы браузер сохранял масштабированные пиксели canvas чёткими.
Для фотографий и градиентов оставьте значение auto — сглаживание именно то, что нужно в таких случаях.
crisp-edges и pixelated похожи, но не идентичны. pixelated гарантирует масштабирование методом ближайшего соседа; crisp-edges позволяет каждому браузеру выбрать свой чёткий алгоритм. Авторы часто указывают оба значения, чтобы одно служило запасным вариантом для другого в разных движках.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам |
| Наследуется | Да |
| Анимируемо | Дискретно |
| Версия | CSS3 |
| DOM Syntax | object.style.imageRendering = "pixelated" |
Синтаксис
image-rendering: auto | crisp-edges | pixelated | initial | inherit;Свойство принимает одно ключевое слово. Сокращённой формы нет.
Значения
| Значение | Описание |
|---|---|
auto | Браузер выбирает алгоритм, максимизирующий визуальное качество. Для большинства браузеров это билинейная или бикубическая интерполяция — плавная, но может выглядеть размыто на пиксельной графике. Это значение по умолчанию. |
crisp-edges | Изображение масштабируется без какого-либо сглаживания или антиалиасинга. Браузер выбирает собственный алгоритм с высоким контрастом (может быть метод ближайшего соседа или другой чёткий метод). Результаты могут незначительно отличаться в разных движках. |
pixelated | Строгое масштабирование методом ближайшего соседа. Каждый исходный пиксель отображается в один или несколько пикселей назначения того же цвета без смешивания. Гарантирует блочный пиксельный вид во всех поддерживающих браузерах. |
initial | Сбрасывает свойство до значения по умолчанию (auto). |
inherit | Наследует значение от родительского элемента. |
pixelated vs crisp-edges — в чём разница?
Оба значения предотвращают сглаживание, но их договорённости различаются:
pixelated— точная спецификация: браузер обязан использовать масштабирование методом ближайшего соседа. Каждый пиксель в выходном изображении соответствует ровно одному исходному пикселю — вы получаете жёсткие, угловатые, намеренно блочные результаты. Именно это используют пиксельные игры.crisp-edgesозначает «избегать сглаживания и сохранять контрастность», но оставляет выбор алгоритма браузеру. Firefox использует собственный чёткий алгоритм; в старом Safari использовался-webkit-optimize-contrast. Визуальный результат обычно очень похож наpixelated, но идентичность не гарантируется.
Для пиксельной графики предпочтительнее pixelated. Используйте crisp-edges как страховку для старых браузеров, не поддерживающих pixelated.
Примеры
Базовое сравнение: auto и pixelated
В примере ниже одно и то же небольшое изображение отображается при ширине, втрое превышающей его естественную. Версия с auto размыта; pixelated сохраняет жёсткие края.
<!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://api.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://api.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://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
</div>
</div>
</body>
</html>Результат
Использование crisp-edges с запасным вариантом
Поскольку у crisp-edges неоднородная история поддержки (старый Safari требовал -webkit-optimize-contrast), безопаснее всего указать все три объявления. Браузер сохранит последнее распознанное значение:
.sharp-upscale {
image-rendering: -webkit-optimize-contrast; /* Safari < 13 */
image-rendering: crisp-edges; /* Firefox, most modern browsers */
image-rendering: pixelated; /* Chrome, Edge, Safari 13+ */
}Применение image-rendering к фоновому изображению CSS
Свойство работает с background-image так же, как и с элементами <img>. Это удобно для плиточных пиксельных фонов:
.pixel-bg {
background-image: url('sprite-sheet.png');
background-size: 300%; /* zoom in */
image-rendering: pixelated; /* keep pixels sharp */
}Применение image-rendering к элементу canvas
Когда вы рисуете при низком логическом разрешении на <canvas> и затем масштабируете элемент через CSS, pixelated сохраняет пиксели canvas чёткими — это распространённая техника для пиксельных игр:
<canvas
id="game"
width="64"
height="64"
style="width: 320px; height: 320px; image-rendering: pixelated;"
></canvas>Атрибуты width/height задают поверхность рисования (64 × 64 пикселя). CSS width/height масштабируют элемент на экране в 5 раз. Без pixelated браузер размыл бы масштабированный canvas.
Важные моменты
- Влияет только на масштабированные изображения. Если изображение отображается в естественном размере, интерполировать нечего, поэтому
image-renderingне имеет видимого эффекта. - Наследование может удивить. Свойство наследуется, поэтому установка
image-rendering: pixelatedна<div>применяется ко всем дочерним элементам<img>и фоновым изображениям, если только вы не переопределите его. pixelatedработает и при уменьшении. Метод ближайшего соседа применяется и когда изображение меньше исходного, что может выглядеть с артефактами. Для общего уменьшенияautoобычно выглядит лучше.- Применяется к
<img>,background-image,<canvas>и SVG<image>— но не к векторному содержимому (встроенные SVG-пути), которое браузер растеризует на лету. - HiDPI / Retina-экраны. На экране с плотностью 2× пиксельная графика, отображаемая с
image-rendering: pixelated, будет занимать 2 CSS-пикселя на исходный пиксель. Рассмотрите возможность предоставления правила@media (min-resolution: 2dppx)с изображением большего естественного размера для большей детализации в физических пикселях. object-fitвыполняется передimage-rendering. Свойствоobject-fitопределяет, как изображение заполняет свой блок;image-renderingзатем определяет, как выглядит масштабированный результат.
Поддержка браузеров
pixelated хорошо поддерживается в Chrome, Edge, Safari 13+ и Firefox 93+. crisp-edges поддерживается во всех современных браузерах (Firefox, Chrome, Safari, Edge) и является более безопасным выбором для кода, который должен работать на старых браузерах. Устаревшее значение -webkit-optimize-contrast нужно только для Safari 12 и ниже.
Связанные свойства
background-image— устанавливает изображения, которыеimage-renderingможет сделать более чёткими.background-size— масштабирует фоновые изображения, делаяimage-renderingактуальным.object-fit— управляет тем, как замещаемый элемент заполняет свой блок перед отрисовкой.object-position— перемещает изображение внутри блока вместе сobject-fit.width— изменяет размер элементов, что и запускает актуальностьimage-rendering.filter— применяет визуальные эффекты (размытие, контрастность и др.) после отрисовки.- CSS3 properties — другие современные CSS свойства.