LQIP-плейсхолдер онлайн
Крошечная заглушка, которая показывается, пока грузится настоящая картинка. Четыре стиля, готовые сниппеты для Next.js, обычного HTML и CSS — и всё это меньше килобайта.
Как это работает
три шагаЗагрузите картинку
Ту самую, которая будет грузиться на сайте.
Выберите стиль
Размытие как в Next.js, пиксельная мозаика, однотонная заливка или лёгкий SVG.
Заберите код
blurDataURL, HTML с blur-up переходом или CSS-фон. Вес заглушки виден рядом.
Частые вопросы
Что вообще такое LQIP?
Low Quality Image Placeholder — крошечная копия картинки в несколько десятков байт, которую показывают вместо пустого места, пока грузится оригинал. Страница перестаёт «прыгать», и загрузка ощущается быстрее, даже если по секундомеру она такая же.
Какой размер заглушки выбрать?
Обычно 16–24 пикселя по ширине: этого хватает, чтобы передать композицию и цвета, а вес остаётся в пределах сотен байт. Больше 48 брать смысла нет — заглушка начнёт весить как небольшая картинка.
Чем отличаются стили?
Размытие даёт мягкий переход, как в Next.js. Мозаика оставляет видимые квадраты — приём в духе ретро-интерфейсов. Однотонная заливка — самый лёгкий вариант, а SVG хорош тем, что размытие делает сам браузер, и строка получается совсем короткой.
Куда вставлять blurDataURL?
В компонент next/image: placeholder="blur" и blurDataURL со строкой из этого инструмента. Для обычного сайта возьмите сниппет HTML — там заглушка стоит фоном и убирается, когда настоящая картинка загрузилась.
Файл загружается на ваш сервер?
Нет. Всё считается в браузере на вашем устройстве: файл не уходит к нам и нигде не сохраняется. Закрыли вкладку — не осталось ничего.
Под капотом — НанаБанана Ai
Утилита выше правит пиксели по формулам. Основной сервис меняет само содержание кадра: убирает лишние объекты, заменяет фон и одежду, реставрирует старые снимки, собирает карточки товара и портреты по вашему фото — на нейросетях, с русскими лицами и кириллицей в кадре.
Другие инструменты
УтилитыПока картинка грузится, на её месте либо пустота, либо прыгающий макет — и то и другое читается как «сайт тормозит». LQIP решает это крошечной копией изображения, встроенной прямо в HTML: она появляется мгновенно, передаёт композицию и цвета, а затем сменяется настоящим файлом. Инструмент собирает такую заглушку в четырёх стилях, показывает её вес и отдаёт готовый код — для next/image, обычного HTML или CSS-фона.
Ключевые запросы: lqip генератор, blurdataurl next.js, плейсхолдер для картинки, blur up placeholder
Используем Яндекс.Метрику для аналитики. Подробнее