ПостЗабытые и неизведанные свойства

Забытые и неизведанные свойства Недавно открыл для себя image-rendering, благодаря которому можно указать, как будет вести себя изображение при масштабировании. Представим, что у вас есть растровая PNG картинка 50 на 50 пикселей, и вы пытаетесь растянуть её до 300. Браузер, чтобы это смотрелось более-менее сносно, "размылит" её. В большинстве случаев это будет вполне ожидаемым результатом, но иногда нам может потребоваться наоборот показать пользователю "острые пиксели". Собственно, для этого и было создано свойство image-rendering, которое управляет алгоритмом рендеринга изображений при масштабировании. Оно имеет следующие значения: 1) auto (по-умолчанию) — браузер подбирает алгоритм самостоятельно 2) smooth — картинка "размывается" 3) pixelated — картинка сохраняет видимые пиксели 4) crisp-edges — картинка сохраняет резкие контуры Разница между pixelated и crisp-edges не всегда заметна, но с точки зрения алгоритма она есть. Первый при масштабировании каждый пиксель превращает в большой квадрат из пикселей того же цвета, а второй просто старается сохранить резкие контуры изображения. То есть pixelated стоит использовать при работе с пиксель-артами, ретро-играми и спрайтами, а crisp-edges для схем, чертежей и QR-кодов. ⚙️ Поддержка браузерами (auto, smooth, pixelated, crisp-edges)