Розробник зберіг цілий вебсайт у пікселях favicon

Кожен вебсайт має favicon — маленьку іконку у вкладці браузера, яку завантажують один раз і більше ніколи не згадують. Розробник Тім Верле вивернув це припущення навиворіт і створив невелике демо, у якому ціла вебсторінка зберігається в пікселях favicon, а браузер відновлює її під час запуску.

Байти, сховані в каналах RGB

Підхід — це прямий різновид стеганографії. Кожен піксель зображення має значення червоного, зеленого й синього — три байти. Верле взяв UTF-8 байти невеликого HTML-документа і записав їх просто в ці канали, піксель за пікселем, отримавши зображення, схоже на візуальний шум. На початок додано чотирибайтовий заголовок із довжиною даних, бо в кінці зображення можуть залишитися невикористані пікселі, і без значення довжини неможливо зрозуміти, де закінчуються справжні дані.

Самі дані — лише 208 байтів HTML; разом із заголовком вийшло 212 байтів. За три байти на піксель це потребує 71 пікселя, а найменше квадратне зображення, куди вони вміщуються, — 9x9 пікселів, тобто 81 піксель. Готове зображення використовує 87% своєї місткості в 239 байтів.

Як сторінку читають назад

Для відновлення сторінки використовують API, які вже є в кожному браузері. Favicon завантажується як зображення, малюється на canvas, після чого JavaScript читає всі пікселі через canvas API. Код відновлює масив байтів, читає перші чотири байти, щоб дізнатися довжину даних, витягує їх і декодує як текст UTF-8 — і оригінальний HTML знову доступний.

Є один нюанс: favicon не містить вебсайту, він містить контент вебсайту. Для декодування зображення все одно потрібен невеликий bootstrap-скрипт; без JavaScript файл — просто PNG, у якому випадково опинився HTML. На демо-сторінці є кнопка "Render Website", яка читає favicon, декодує HTML і замінює сторінку відновленим контентом.

Корисно? Насправді ні — і в цьому суть

Верле прямо каже, що практичної користі немає: місткість крихітна, а сторінка не може завантажити себе без JavaScript, тож існують десятки кращих способів доставити невеликий HTML-документ. Експеримент продовжує попередній, у якому він зберіг два байти в DPI-регістрі своєї мишки, і належить до тієї ж категорії — перевірки, що витримає звичайний формат.

Він також перелічує альтернативи: вбудовування розмітки безпосередньо в SVG-favicon, використання коментарів PNG на кшталт tEXt, zTXt та iTXt, або формату ICO, який може містити кілька іконок різної роздільності. Демо доступне на його сайті, а код опубліковано на GitHub.