CSS-дизеринг: как вернуть пиксельную магию в веб
Дизеринг с помощью CSS — это не просто ностальгия, а способ сжать изображения без потери качества (и без костылей).
Помните, как в 90-х на компьютерах с 256 цветами картинки выглядели как абстрактная живопись? Дизеринг был спасением — он смешивал пиксели, чтобы имитировать оттенки, которых нет. Сейчас, когда у всех Retina-дисплеи, кажется, что эта техника умерла. Но нет, её можно воскресить с помощью CSS, и это не просто баловство.
Разработчик Ikesau придумал, как накладывать дизеринг прямо в браузере, используя CSS-фильтры и псевдоэлементы. Идея простая: берём изображение, добавляем поверх него полупрозрачный шум, и вуаля — получаем эффект старого монитора. Но подвох в том, что это ещё и полезно: дизеринг позволяет уменьшить размер файла, сохраняя визуальное качество. Особенно актуально для анимаций или фонов, где каждый байт на счету.
Конечно, можно сказать: «Зачем мне эти пляски с бубном, если есть WebP?» Но, во-первых, это весело. Во-вторых, CSS-дизеринг работает поверх любых форматов и не требует перекодирования. А в-третьих, это отличный способ добавить ретро-шарм вашему сайту — клиенты оценят, если, конечно, они не дизайнеры с маниакальной любовью к гладким градиентам.
Кстати, реализация на удивление проста: достаточно добавить пару строк CSS с mix-blend-mode и background-image: repeating-radial-gradient. Никаких Canvas, WebGL или других тяжеловесных инструментов. Правда, производительность на мобильных может подкачать, но кто считает FPS, когда речь о ностальгии?
Комментарий студии METABYTE: Дизеринг — это как старый друг, который внезапно оказывается полезным. Мы тоже любим экспериментировать с CSS, но обычно ограничиваемся градиентами и тенями. Теперь у нас есть повод удивить заказчика «пиксельным» фоном за 5 минут работы. Главное, не переборщить, чтобы сайт не стал похож на Windows 95.