Бесплатно · без регистрации · blurDataURL для Next.js
LQIP-плейсхолдер
Создай крошечную размытую заглушку, которая показывается, пока грузится полное фото — плавная ленивая загрузка без «прыжков» layout. Получишь готовый blurDataURL для Next.js, CSS и data:URI.
Загрузка инструмента...
Плавная ленивая загрузка
Размытая заглушка занимает место фото — без «прыжков» вёрстки и пустоты.
blurDataURL для Next.js
Готовый сниппет <Image placeholder="blur"> — вставил и работает.
Меньше килобайта
Крошечный data:URI, вшивается прямо в HTML/код без веса для страницы.
3 стиля заглушки
Размытие, пиксельная мозаика или один доминантный цвет — на выбор.
Видно эффект вживую
Слева оригинал, справа — как выглядит плейсхолдер до загрузки фото.
Данные не сохраняются
Обработка в памяти на время запроса, без хранения и логирования.
Как это работает
Как создать LQIP-плейсхолдер — 3 шага
Перетащи картинку. Слева — оригинал, справа сразу появится, как выглядит размытая заглушка до загрузки.
Размытие (плавный градиент), пиксели (мозаика) или один доминантный цвет. Ползунок задаёт размер плейсхолдера — обычно 16 px достаточно, вес выходит меньше килобайта.
Готовые сниппеты: blurDataURL для Next.js <Image placeholder="blur">, CSS background и data:URI. Кнопка «Копировать» рядом с каждым.
FAQ
Вопросы о LQIP и blurDataURL
LQIP (Low-Quality Image Placeholder) — крошечная размытая версия картинки размером в несколько пикселей, которую показывают увеличенной и размытой, пока грузится полное изображение. Пользователь сразу видит «набросок» будущего фото вместо пустого места, а когда основная картинка загрузится — она плавно заменяет заглушку. Так работает ленивая загрузка в Medium, Next.js и многих современных сайтах.
Он улучшает восприятие скорости и убирает «прыжки» вёрстки (layout shift). Без плейсхолдера на месте картинки сначала пустота, потом резко появляется фото — контент дёргается. Размытая заглушка занимает то же место и цвет, поэтому переход плавный, а страница ощущается быстрее. Это положительно влияет и на метрику CLS (Cumulative Layout Shift) в Core Web Vitals.
blurDataURL — это data:URI крошечной картинки, который принимает компонент Next.js
Обычно 16 px по ширине — этого достаточно: плейсхолдер всё равно показывается размытым и увеличенным, детали не нужны, а вес получается меньше килобайта. Можно взять чуть больше (до 48 px), если хотите более «читаемую» заглушку, но вес вырастет. Смысл LQIP — быть максимально лёгким.
Размытие — крошечная копия фото с плавным блюром, самый популярный вариант (как в Next.js). Пиксели — мозаика без размытия, ретро-эффект. Один цвет — сплошная заливка усреднённым доминантным цветом картинки, самый лёгкий вариант, когда нужна только цветовая заглушка.
Обычно меньше 1 КБ — это крошечный data:URI, который можно вшить прямо в HTML или в код компонента без ущерба для веса страницы. Мы показываем точный вес в байтах после генерации.
Да. Кроме blurDataURL для Next.js мы даём CSS-сниппет (background-image) и чистый data:URI — их можно использовать в любом проекте: поставить размытый фон под картинку через CSS, показать заглушку до загрузки скриптом и т. д.
Нет. Картинка уменьшается и кодируется в памяти сервера на время запроса, сразу возвращается результатом — ничего не хранится и не логируется.
Помимо этого инструмента
Это только один из инструментов Gobanana
Под капотом — полноценный ИИ-редактор: нейрофотосессии, карточки для Wildberries и Ozon, замена фона, реставрация старых снимков — текстовой командой на русском, за 30 секунд.
Бесплатно · без установки · 3 генерации в подарок при регистрации
Смотри также
Другие возможности Go Banana
Что такое LQIP и зачем он нужен
LQIP (Low-Quality Image Placeholder) — техника плавной загрузки картинок. Вместо пустого места или спиннера на месте будущего фото показывают его крошечную размытую версию (несколько пикселей, растянутых и размытых). Пользователь сразу видит цвет и общую форму, а когда полная картинка загрузится — она плавно заменяет заглушку.
Так работает ленивая загрузка изображений в Medium, Next.js, многих новостных сайтах и интернет-магазинах. Плейсхолдер весит меньше килобайта, поэтому появляется мгновенно.
Зачем это нужно
- Плавность — нет резкого «появления» картинки из пустоты.
- Нет прыжков вёрстки — заглушка занимает то же место, что и будущее фото (лучше метрика CLS в Core Web Vitals).
- Ощущение скорости — страница кажется быстрее, потому что визуальный контент появляется сразу.
- Экономия трафика — тяжёлое фото грузится лениво, только когда нужно, а заглушка — почти невесомая.
blurDataURL для Next.js
Компонент Next.js <Image> умеет показывать размытый плейсхолдер из коробки — нужно только передать ему готовую строку blurDataURL:
<Image
src="/your-image.jpg"
placeholder="blur"
blurDataURL="data:image/webp;base64,UklGR...."
width={800}
height={600}
alt=""
/>
Мы генерируем эту строку за вас — просто скопируйте готовый сниппет. Вручную считать base64 крошечной картинки не нужно.
Три стиля заглушки
| Стиль | Как выглядит | Когда брать |
|---|---|---|
| Размытие | Мини-копия фото с блюром | По умолчанию — как в Next.js, самый естественный |
| Пиксели | Мозаика без размытия | Ретро-эффект, «кубики» |
| Один цвет | Сплошная заливка доминантным цветом | Самый лёгкий, когда нужна только цветовая заглушка |
Какой размер выбрать
Обычно 16 px по ширине — достаточно: плейсхолдер всё равно показывается размытым и увеличенным, детали не важны, а вес меньше килобайта. Больший размер (до 48 px) даёт более «читаемую» заглушку ценой веса. Смысл LQIP — быть максимально лёгким, поэтому меньше почти всегда лучше.
Что дальше
- Нужно встроить обычную картинку прямо в HTML/CSS — используй перевод в Base64.
- Уменьши или пережми полное фото, чтобы оно грузилось быстрее после плейсхолдера.
- Меняешь формат картинки под веб (WebP/AVIF) — есть отдельный конвертер.