Handsum: новый формат изображений для сверхбыстрой загрузки превью менее 200 байт

Новый формат изображений Handsum, разработанный инженером Google Нигелем Тао, позволяет создавать превью размером менее 200 байт. Это решение ускоряет загрузку веб-страниц, встраивая миниатюры прямо в HTML и исключая дополнительные HTTP-запросы. Формат использует 6-битный цвет и разрешение до 64×64

Как Handsum решает проблему медленных превью

Современные пользователи ожидают мгновенной загрузки контента. Если страница грузится дольше пары секунд, многие уходят. Один из способов ускорить восприятие — показывать низкокачественное превью до полной загрузки основного изображения. Такие превью называются LQIP (Low Quality Image Placeholder). Традиционные подходы, такие как масштабированный JPEG или SVG-маски, требуют дополнительных запросов к серверу или имеют накладные расходы на декодирование. Handsum предлагает альтернативу: настолько малый размер, что превью можно встраивать прямо в HTML через data URI, полностью исключая задержки сети.

Формат Handsum не пытается заменить JPEG или WebP. Его задача — быть максимально компактным и быстрым для предварительного просмотра. Тао утверждает, что формат особенно полезен для сайтов с большим количеством изображений, где каждый килобайт на счету. Например, интернет-магазины, галереи или новостные порталы могут использовать Handsum для показа мгновенных превью, улучшая пользовательский опыт и метрики Core Web Vitals.

Что произошло: появление Handsum

Нигель Тао, известный по работе над библиотекой imagefmt и вкладу в язык Go, опубликовал в своём блоге спецификацию и реализацию формата Handsum. Название — игра слов «hand» и «thumb» (большой палец), намекающая на рукописный характер формата и его использование для «пальцевых» превью. Формат поддерживает только 6-битный цвет (64 цвета) и разрешение до 64×64 пикселей. Кодирование основано на алгоритме LZSS (Lempel-Ziv-Storer-Szymanski), что обеспечивает высокую степень сжатия для простых изображений.

Тао предоставил эталонную реализацию на C, а также утилиту командной строки для конвертации изображений в Handsum. Исходный код доступен на GitHub. Формат не привязан к конкретной платформе и может быть реализован в любом языке программирования. Это открывает возможности для интеграции в веб-сборщики, системы управления контентом и фреймворки.

Как устроен Handsum: технические детали

Handsum использует простую схему: изображение разбивается на блоки 2×2 пикселя, каждый блок кодируется как один байт (6 бит на цвет и 2 бита на индекс палитры). Палитра из 64 цветов предопределена и не хранится в файле. Затем последовательность байтов сжимается алгоритмом LZSS. На практике это даёт средний размер 100–200 байт для изображений 32×32 пикселя.

Декодирование тривиально: распаковать LZSS, восстановить блоки и отобразить. Тао утверждает, что декодирование можно выполнить буквально за несколько десятков инструкций CPU. Формат не поддерживает альфа-канал, метаданные или анимацию — только статичное 6-битное изображение. Это сознательное ограничение: минимализм позволяет достичь рекордной степени сжатия.

Какие преимущества даёт Handsum для веб-разработчиков?

Handsum в первую очередь интересен веб-разработчикам, которые стремятся оптимизировать Core Web Vitals, особенно Largest Contentful Paint (LCP). Встраивание превью через data URI позволяет показать пользователю хоть какую-то картинку мгновенно, до загрузки основного изображения. Это может улучшить восприятие скорости на мобильных устройствах и при медленном соединении.

Для российских пользователей, где скорость интернета варьируется, такой подход может быть особенно полезен. Однако формат пока не поддерживается ни одним браузером нативно: потребуется JavaScript-декодер. Тао предоставил эталонный декодер на C, но для веба нужна будет реализация на WebAssembly или JavaScript. Сообщество уже может начать создавать полифилы и плагины для популярных сборщиков, таких как Webpack или Vite.

Предыстория и контекст: эволюция LQIP

Проблема LQIP не нова. Существуют различные подходы: от простого масштабирования JPEG до специализированных форматов вроде JPEG XL (с поддержкой прогрессивной загрузки) или использования SVG-масок. Однако все они либо требуют дополнительных запросов, либо имеют накладные расходы на декодирование. Handsum предлагает альтернативу: настолько малый размер, что превью можно встраивать прямо в HTML-код через data URI, полностью исключая задержки сети.

Тао ранее работал над форматом Wuffs — быстрым декодером изображений, и его опыт в низкоуровневой оптимизации очевиден. Handsum — это, по сути, минималистичный формат, пожертвовавший качеством ради скорости и размера. Он оптимизирован для простых изображений, таких как иконки, логотипы и схематичные рисунки. Фотографические изображения с большим количеством деталей могут выглядеть слишком размыто, но для placeholder-функции это приемлемо.

Что будет дальше: перспективы Handsum

На данный момент Handsum — это экспериментальный проект. Тао не анонсировал планов по стандартизации или внедрению в браузеры. Однако концепция может привлечь внимание сообщества: возможно, появятся полифилы или плагины для сборщиков (например, для Webpack), которые автоматически будут генерировать Handsum-превью.

В долгосрочной перспективе, если формат докажет свою эффективность, он может быть предложен для включения в спецификации веб-платформы. Но пока это лишь proof of concept. Разработчики могут экспериментировать с Handsum, конвертируя свои изображения с помощью утилиты командной строки и встраивая результат в HTML. Это простой способ улучшить восприятие скорости без серьёзных изменений в архитектуре.

Что пока неизвестно: ограничения и вопросы

Нет данных о производительности декодирования на реальных устройствах по сравнению с существующими LQIP-подходами. Неизвестно, насколько хорошо Handsum работает с фотографическими изображениями (он оптимизирован для простых иконок и логотипов). Также не ясно, будет ли формат поддерживать прогрессивную загрузку или адаптивное разрешение.

Кроме того, отсутствие нативной поддержки в браузерах означает, что для использования Handsum потребуется JavaScript, что может увеличить время выполнения на слабых устройствах. Однако размер декодера, скорее всего, будет небольшим, и выигрыш от исключения HTTP-запросов может перевесить затраты на выполнение скрипта.

В целом Handsum — это интересный эксперимент, который может стать частью инструментария веб-разработчика для оптимизации загрузки. Следите за репозиторием на GitHub, чтобы быть в курсе обновлений.