Когда CSS становится холстом для изображений

Представьте, что вам нужно встроить изображение на страницу, но:

Нельзя использовать внешние ресурсы
Нужен необычный визуальный эффект
Хочется удивить коллег нестандартным подходом

Именно для таких случаев Хавьер Байт создал img2css — инструмент, превращающий любую картинку в CSS-код. Причем двумя совершенно разными способами.

Что умеет img2css?

1. Чистый CSS через box-shadow

Самый безумный режим работы. Каждый пиксель изображения превращается в box-shadow для одного-единственного div'а. Результат выглядит как массивный CSS-код, где каждый пиксель описан вручную.

.pixel {
  width: 1px;
  height: 1px;
  box-shadow: 
    0px 0px #000, 
    1px 0px #111,
    2px 0px #222;
    /* и так тысячи строк */
}

Зачем это нужно? Разработчик честно предупреждает: для продакшена не годится. Но как технический эксперимент или способ удивить на собеседовании — идеально.

2. Base64 в теге img

Более практичный вариант — встраивание изображения прямо в HTML через base64-кодирование. Никаких внешних запросов, все данные содержатся прямо в коде страницы.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSU..." />

Как это работает под капотом?

Загружаем изображение в canvas
Анализируем каждый пиксель, получая его цвет и позицию
Для CSS-режима генерируем box-shadow для каждого пикселя
Для base64-режима кодируем изображение в строку

Интересно, что проект написан на React и использует canvas API для обработки изображений. Исходный код открыт и довольно компактен — всего около 100 строк основного кода.

Когда это может пригодиться?

Демо-страницы, где важно показать работу без внешних зависимостей
Эксперименты с визуализацией — можно анимировать каждый «пиксель» отдельно
Пасхалки в веб-приложениях
Обучение — наглядный пример работы box-shadow и base64

Попробуйте сами

Лучший способ понять магию img2css — попробовать на официальном сайте. Загрузите любое изображение и посмотрите, как оно превращается в CSS.

Для разработчиков есть даже программный интерфейс, если нужно встроить функциональность в свои проекты.

img2css — это тот редкий случай, когда технический эксперимент оказывается и полезным, и интересным. Хотя «боевого» применения у чистого CSS-режима немного, сам подход заставляет по-новому взглянуть на возможности веб-технологий.

Попробуйте, если:

Любите необычные веб-эксперименты
Хотите понять глубинные возможности CSS
Ищете способ встроить изображение без внешних ресурсов

А если реализуете что-то интересное с помощью img2css — обязательно поделитесь в комментариях!