Как пользоваться: BlurHash и LQIP генератор
- Выберите фото (или попробуйте пример). Всё работает в вашем браузере.
- Настройте детализацию BlurHash: 4 × 3 подходит для большинства пейзажных фото; больше компонентов сохраняют больше форм, но делают строку длиннее.
- Выберите ширину и формат LQIP — 16 px в WebP обычно занимает меньше 1 КБ.
- Скопируйте строку BlurHash, data URI или готовый код для HTML/CSS, Next.js или React.
Три вида плейсхолдеров
| Плейсхолдер | Размер | Лучше всего подходит |
|---|---|---|
| Доминантный цвет | 7 символов | Сетки миниатюр; самый простой вариант |
| BlurHash | 20–30 символов | Хранение в базе данных или ответе API рядом с URL изображения; декодируется в пиксели в приложении |
| LQIP (base64-изображение) | Меньше 1 КБ | Встраивание в HTML или CSS, blurDataURL в Next.js; работает без JavaScript |
Как работает BlurHash
BlurHash описывает изображение несколькими косинусными волнами — примерно как JPEG очень низкого разрешения. Картинка переводится в линейный свет, умножается на косинусные паттерны по каждому направлению, а полученные коэффициенты квантуются и записываются алфавитом из 83 символов. При декодировании те же волны восстанавливаются, и получается плавное размытие с цветами изображения и его примерной композицией. Декодируйте примерно при 32 × 32 пикселях и растяните через CSS — размытость здесь и нужна.
Всегда задавайте width и height (или aspect-ratio) у изображения, чтобы плейсхолдер резервировал место и ничего не прыгало, когда придёт фото. Полное изображение тоже стоит сжать с помощью Image Compressor.
Также ищут как: генератор blurhash, генератор lqip, плейсхолдер для изображений, blur placeholder, nextjs blurdataurl, blurhash онлайн, низкокачественный плейсхолдер изображения, прогрессивная загрузка изображений.
Инструменты, которые хорошо сочетаются с BlurHash и LQIP генератор
- Изменить размер изображения — Измените размер фото до точных размеров в пикселях или процентах, обрежьте его под формат соцсети или впишите в рамку с цветом фона.
- Изображение в Base64 — Превратите PNG, JPEG, SVG, WebP или GIF в Base64 Data URI с готовыми CSS и HTML или вставьте строку Base64, чтобы просмотреть и скачать изображение.
- Конвертер изображений — Конвертируйте любое изображение, которое открывает ваш браузер, — PNG, JPG, WebP, AVIF, GIF, BMP или SVG — в PNG, JPG, WebP или AVIF.
- Тест скорости страницы — Запустите Google Lighthouse для любого URL в мобильном или десктопном режиме.