CSS свойство image-rendering
Свойство image-rendering устанавливает алгоритм изменения масштаба изображения.
По умолчанию браузеры применяют бикубический алгоритм (aliasing) к масштабированному изображению, чтобы предотвратить искажение, но это может быть проблемой, если хотите, чтобы изображение сохраняло свой оригинальный пикселизированный вид.
image-rendering: auto | crisp-edges | pixelated | initial | inherit;
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.pixelated {
image-rendering: pixelated;
}
.resize {
width: 45%;
clear: none;
float: left;
}
.resize:last-of-type {
float: right;
}
.resize img {
width: 100%;
}
img {
margin-bottom: 20px;
width: 100%;
}
.original img{
width: 20%;
}
body {
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<h2>Пример свойства image-rendering</h2>
<div class="original">
<p>Оригинальный размер изображения:</p>
<img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
</div>
<div class="resize">
<p><code>image-rendering: auto</code></p>
<img src="/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="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
</div>
</body>
</html>
