Перетащите изображение или нажмите для выбора
PNG, JPEG, WebP, GIF, BMP, AVIF
Как это работает
Заглушка — это то, что занимает место изображения, пока оно загружается. Она решает две разные задачи: резервирует ровно то пространство, которое займёт картинка, чтобы окружающий текст не прыгал при её появлении, и показывает нечто похожее на итоговое содержимое, благодаря чему ожидание воспринимается короче, чем перед серым прямоугольником.
Есть три семейства решений. Компактные хеши (BlurHash и ThumbHash) сжимают изображение в настолько короткую строку, что её можно хранить в столбце базы данных рядом с остальными полями записи; браузер декодирует её и отрисовывает размытие. Data URI (миниатюра LQIP и SVG) несут уже закодированное изображение внутри HTML или CSS, поэтому им вовсе не нужен JavaScript. А сплошной цвет — самая дешёвая заглушка из всех: семь символов.
Что выбрать, зависит от того, откуда берётся HTML. Если изображения приходят из базы данных и выводятся сотнями, хеш легче всего в пересчёте на запись. Если вы генерируете статические страницы или используете фреймворк, который уже поддерживает заглушки, data URI избавит от добавления кода декодирования. Все значения, которые вы здесь видите, вычисляются в вашем браузере: изображение не отправляется ни на какой сервер.
Примеры
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjДлина BlurHash зависит только от числа компонент, а не от размера или содержимого изображения: при 4 × 3 это всегда 28 символов, при 3 × 3 — 22, при 5 × 4 — 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHThumbHash занимает от 17 до 25 байт, то есть от 24 до 36 символов в Base64. Точный размер зависит от соотношения сторон изображения и от наличия прозрачности, поскольку формат кодирует ещё и альфа-канал.lqip 24 px webpdata:image/webp;base64,UklGRi…Миниатюра WebP шириной 24 px обычно укладывается в 1 КБ. Будучи встроенной в HTML, она не создаёт дополнительного запроса, но увеличивает документ, который не кешируется отдельно.Сценарии использования
- Сохранить BlurHash или ThumbHash в таблице изображений, чтобы список или лента с бесконечной прокруткой показывали что-то с первого мгновения.
- Заполнить атрибут blurDataURL в next/image или placeholder в NgOptimizedImage, когда изображение не является статическим импортом.
- Избежать сдвига макета (CLS) в карточках товаров или статей, сочетая заглушку с атрибутами width и height.
- Встроить заглушку в статический HTML, письмо или шаблон, где нельзя выполнить JavaScript для декодирования.
- Использовать один и тот же BlurHash в вебе и в мобильных приложениях, для которых есть декодеры на Swift, Kotlin и Flutter.
- Использовать средний цвет как фон контейнера, когда бюджет байтов не позволяет даже миниатюру.
Часто задаваемые вопросы
BlurHash или ThumbHash?
ThumbHash точнее воспроизводит изображение при меньшем числе байт, сохраняет прозрачность и хранит соотношение сторон, так что для отрисовки не нужно даже знать исходный размер. BlurHash появился раньше и менее точен, зато имеет реализации для куда большего числа платформ и языков. Если начинаете с нуля — ThumbHash; если декодеры BlurHash уже есть в вашем стеке, переходить незачем.
Улучшает ли это LCP?
Напрямую — нет. Заглушка улучшает субъективное ощущение скорости и вместе с width и height устраняет сдвиг макета, но метрика LCP по-прежнему фиксируется в момент отрисовки настоящего изображения. Более того: если главное изображение и есть элемент LCP, не ставьте ему loading="lazy" и не прячьте его за заглушкой; лучше пометить его fetchpriority="high", чтобы браузер запросил его раньше. Заглушки нужны для изображений за пределами первого экрана.
Сколько компонент использовать в BlurHash?
Четыре на три хорошо работает для горизонтальных изображений, три на четыре — для вертикальных. Каждая дополнительная компонента добавляет два символа и немного детализации, но выше шести-семи разница перестаёт быть заметной на глаз, ведь результат всё равно показывается размытым.
Хеш или data URI?
Хеш занимает несколько десятков байт на изображение и идеален, когда их много на одной странице, но требует клиентского кода для декодирования. Data URI не требует ничего, зато весит в десять–пятьдесят раз больше и путешествует внутри HTML, который не кешируется отдельно. Если выделенных изображений немного, лучше data URI; при длинных списках — хеш.
Почему стоит использовать SVG, а не миниатюру напрямую?
Потому что размытие применяет браузер при отрисовке SVG. Это позволяет исходить из гораздо меньшей миниатюры без появления пиксельных блоков при увеличении, и результат выглядит одинаково мягко в любом размере. SVG к тому же фиксирует альфа-канал как непрозрачный, чтобы размытие не делало края прозрачными.
Есть ли ограничение на размер заглушки?
Зависит от инструмента. NgOptimizedImage в Angular выводит предупреждение в консоль, когда data URI заглушки превышает 4000 символов, поскольку дальше вес HTML начинает перевешивать пользу. Это хороший общий ориентир: если ваша миниатюра переходит эту границу, уменьшите ширину или качество.