Генератор для lazy load: оптимизированные изображения и LQIP

Ленивая загрузка означает, что изображения ниже первого экрана скачиваются только когда посетитель прокручивает к ним. Современные браузеры поддерживают это нативно атрибутом loading="lazy" у тега img, а многие сайты добавляют заглушку низкого качества (LQIP): крошечную размытую версию изображения, которая появляется сразу и заменяется настоящей картинкой, когда та загрузится. Обе техники требуют правильных файлов, и эта страница помогает их подготовить.

Важно понимать, что делает генератор. Он сжимает изображения с качеством 80 в исходном формате и размере, готовыми к ленивой загрузке. Изменив две настройки, он создаёт и заглушку: версию шириной всего несколько десятков пикселей в низком качестве, обычно значительно меньше 1 КБ. Он не пишет HTML или CSS и не размывает само изображение; размытие применяется в браузере через CSS при растягивании заглушки.

Как пользоваться: Генератор изображений для lazy load (LQIP)

1. Перетащите изображения в область загрузки, нажмите на неё, чтобы выбрать файлы, или вставьте картинку через Ctrl+V. Страница принимает файлы JPG, PNG, WebP, GIF и BMP, сразу несколько и до 80 МБ каждый.
2. Первый проход, полные изображения: оставьте настройки по умолчанию (качество 80, исходный размер) или выберите WebP в Format и скачайте оптимизированные файлы.
3. Второй проход, заглушки: откройте Resize, выберите Max и введите 32 × 32, снизьте качество примерно до 30 или 40 и задайте в More options шаблон имени {name}-lqip. Скачайте и эти крошечные файлы.
4. Проверьте результат ползунком «до/после»: перетащите разделитель по превью и посмотрите ниже новые размеры, вес файла, качество и процент экономии. Любое изменение настроек автоматически заново обрабатывает все изображения.
5. Скачайте одно изображение или нажмите Download all (ZIP), чтобы получить весь пакет. В More options можно также задать DPI и шаблон имени файла с {name}, {w} и {h}.

Советы по ленивой загрузке

• Никогда не делайте ленивым изображение LCP. Главный баннер или первое крупное изображение должно грузиться сразу; ленивая загрузка задерживает Largest Contentful Paint. Оптимизируйте его оптимизатором для сайта.
• Резервируйте место. Задайте каждому ленивому изображению атрибуты width и height (строка After показывает точный размер), чтобы при загрузке ничего не прыгало.
• Встраивайте заглушку. Заглушку в несколько сотен байтов можно встроить как data URI или использовать как CSS-фон и размыть CSS-фильтром до загрузки полного изображения.
• Полные изображения тоже должны быть лёгкими. Ленивая загрузка откладывает байты, а не убирает их; конвертируйте в WebP или прогоните большие папки через пакетный компрессор.

Приватно, бесплатно и быстро

Вся работа выполняется в вашем браузере: изображения декодируются, масштабируются и перекодируются на вашем устройстве, поэтому ничего не загружается на сервер. Нет регистрации, водяных знаков и дневных лимитов, а данные о местоположении и камере (EXIF) удаляются из каждого результата.