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 без декодера | ✓ | З додатковими кроками | ✓ |
| Завантажує зображення перетягуванням, вибором файлу або вставкою | ✓ | Лише шлях до файлу | Лише перетягування або вибір |
| Кодує цілу бібліотеку за один прохід | ✗ | ✓ | ✓ |
| Запускається автоматично під час завантаження | ✗ | ✓ | ✓ |
Використовуйте це, щоб зрозуміти формат, підібрати кількість компонентів і згенерувати хеші для кількох зображень. Коли ви почнете кодувати кожне завантажене зображення, це місце у вашому конвеєрі — на етапі збірки або в обробнику завантаження — а не у вкладці браузера. Цей інструмент потрібен, щоб визначити, чого ви хочете, перш ніж писати цей код.