Online Tool Store
Генератор BlurHash
Кодируйте изображения в BlurHash для быстрой загрузки. Настройте компоненты, декодируйте хеши и проверьте ошибки цвета. Полностью работает в браузере.
Этот инструмент работает полностью в вашем браузере. Ваши файлы никогда не загружаются на сервер.
Источник
Декодированная заглушка
Только при декодировании; не сохраняется в хеше.
BlurHash — это строка, которую вы сохраняете рядом с изображением и разворачиваете в размытую заглушку при отрисовке — чтобы макет мог показать что-то осмысленное до прихода настоящего изображения, без второго сетевого запроса. Вашему клиенту нужен декодер, чтобы его отобразить; кнопка data URI вместо этого даёт готовое изображение, которое не требует декодера, но занимает больше места. Ничего не загружается.
Как этим пользоваться
- Перетащите изображение, выберите файл или вставьте его сочетанием Ctrl+V — пример уже закодирован, чтобы вы сразу увидели форму результата.
- Оставьте детализацию 4 × 3, если нет причин её менять.
- Скопируйте хеш и сохраните его в той же строке или записи, что и само изображение.
- Декодируйте его в своём клиенте или используйте кнопки data URI или скачивания, если не хотите добавлять декодер.
Что вы на самом деле получаете
Длина фиксирована числом компонентов: четыре символа заголовка плюс два на каждый компонент. Это делает размер полностью предсказуемым ещё до кодирования:
1 × 1 6 символов сплошной средний цвет 3 × 3 22 символа приблизительные светлые и тёмные области 4 × 3 28 символов обычное значение по умолчанию 9 × 9 166 символов убывающая отдача
Двадцать восемь байт — достаточно мало, чтобы бесплатно включить их в JSON-ответ со списком ваших изображений — это меньше, чем большинство отдельных HTTP-заголовков. В этом весь смысл формата: заглушка приходит вместе с метаданными, в том же запросе, который вы и так делали, поэтому не нужен второй проход, прежде чем страница сможет что-то показать. Преобразование также выполняется в линейном свете, а не на исходных байтах sRGB: прямое усреднение гамма-кодированных значений даёт то самое мутное, слишком тёмное размытие, которое иногда заметно. Эффект лучше всего виден при одном компоненте, где хеш — это просто среднее значение: тестовый градиент со средним байтов sRGB rgb(130, 110, 95) при 1 × 1 декодируется в rgb(147, 116, 103), и именно линейный результат физически верен — он соответствует тому, что вы измерили бы, расфокусировав камеру, направленную на изображение. При большем числе компонентов разница в общем среднем сокращается примерно до одного-двух уровней из 255.
Часто задаваемые вопросы
Можно ли использовать хеш прямо в теге <img>?
Нет, и это чаще всего удивляет людей. BlurHash — не формат изображения: это 20-30 символов, которые декодер разворачивает в пиксели. Вашему приложению нужен декодер, чтобы его отобразить. Если нужно что-то, работающее вообще без декодера, используйте кнопки data URI или скачивания в PNG: обе дают настоящий PNG размытой заглушки — он больше по размеру, но сразу подходит для атрибута src или файла на диске.
Сколько компонентов следует использовать?
Четыре по горизонтали и три по вертикали — обычное значение по умолчанию, с которого начинает этот инструмент. Меньше — теряется ощущение расположения объектов в кадре; больше — хеш быстро растёт при очень небольшом видимом выигрыше, ведь результат всё равно будет размытым. Девять на девять — это 166 символов, в шесть раз больше, чем 4×3, для заглушки, на которую никто не смотрит внимательно.
Почему хеш 1×1 выглядит светлее моего изображения?
Потому что среднее вычисляется в линейном свете, а не по байтам sRGB. Кодирование тестового градиента, каналы sRGB которого в среднем дают rgb(130, 110, 95), даёт хеш 1×1, декодирующийся в rgb(147, 116, 103). Это не ошибка — ошибкой было бы прямое усреднение гамма-кодированных значений, и именно поэтому наивно усреднённые миниатюры часто выглядят мутными. Линейное среднее — то, что воспринимается корректно.
Меняет ли ползунок контраста хеш?
Нет. Значение «punch» применяется только при декодировании, поэтому строка остаётся одинаковой независимо от установленного значения. Оно добавлено здесь потому, что большинство библиотек-декодеров предоставляют тот же параметр, и полезно увидеть его эффект, прежде чем выбирать значение в собственном коде.
Сохраняет ли BlurHash прозрачность?
Нет. У формата нет альфа-канала, поэтому прозрачный PNG кодируется так, будто он был сведён на то, что находилось на холсте. Для изображений с настоящей прозрачностью цвет-заглушка обычно лучше, чем размытие.
Загружается ли моё изображение куда-либо?
Нет. Оно декодируется, уменьшается и преобразуется прямо на странице. И кодер, и декодер здесь — это чистая арифметика, выполняемая в вашем браузере, без единого отправленного запроса.
Почему показывается размытая заглушка, а не индикатор загрузки?
Заглушка, соответствующая цветам и общей композиции изображения, делает две полезные вещи. Она резервирует правильное пространство, поэтому при появлении изображения ничего не сдвигается — это главная причина жалоб на смещение макета на страницах с большим количеством изображений. И она сразу даёт глазу что-то правдоподобное, из-за чего загрузка ощущается короче, чем такое же по длительности ожидание перед серым прямоугольником, ведь есть на что смотреть, а не только чего ждать.
Как мы сравниваем
| Функция | Online Tool Store | Кодировщики командной строки | Заглушки в CDN изображений |
|---|---|---|---|
| Изображение никогда не покидает ваше устройство | ✓ | ✓ | ✗ |
| Ничего устанавливать не нужно | ✓ | ✗ | ✓ |
| Декодирует существующий хеш для проверки | ✓ | Отдельная команда | ✗ |
| Показывает ошибку цвета при обратном преобразовании | ✓ | ✗ | ✗ |
| Также экспортирует data URI без декодера | ✓ | С дополнительными шагами | ✓ |
| Загружает изображение перетаскиванием, выбором файла или вставкой | ✓ | Только путь к файлу | Только перетаскивание или выбор |
| Кодирует целую библиотеку за один проход | ✗ | ✓ | ✓ |
| Запускается автоматически при загрузке | ✗ | ✓ | ✓ |
Используйте это, чтобы понять формат, подобрать число компонентов и сгенерировать хеши для нескольких изображений. Когда вы начнёте кодировать каждую загрузку, это место в вашем пайплайне — этап сборки или обработчик загрузки — а не вкладка браузера. Этот инструмент нужен, чтобы разобраться, что вам нужно, прежде чем писать этот код.