Оптимизация изображений для сайта
Выберите фотографии. Инструмент создаст версии разной ширины в WebP и соберёт адаптивный HTML: браузер скачает только тот размер, который нужен экрану.
Как пользоватьсяЛёгкие и адаптивные изображения
Доступно на: 
Оптимизация изображений для сайта: для чего нужен
Выберите одну или несколько фотографий и задайте ширину (по умолчанию 480, 800, 1200 и 1600 px), формат (WebP или JPG) и качество. Инструмент создаёт каждую версию, не увеличивая фото сверх оригинального размера, показывает вес каждой и собирает адаптивный HTML с srcset, sizes, width и height, а также loading=lazy или fetchpriority=high для верхнего изображения.
Как пользоваться
- Выберите изображения для сайта.
- Настройте ширину, формат, качество и папку.
- Скачайте .zip и скопируйте HTML на страницу.
Когда использовать
- Ускорение сайта на телефонах.
- Улучшение LCP и CLS в Core Web Vitals.
- Подготовка фотографий товаров и галерей.
Частые вопросы
Зачем создавать несколько размеров по ширине?
Телефону не нужно загружать фото шириной 1600 px, сделанное для больших мониторов. С srcset браузер выбирает самую маленькую версию, которая всё ещё выглядит чётко на экране, и страница загружается быстрее, что также помогает показателю Core Web Vitals (LCP).
Работает ли WebP во всех браузерах?
Да, во всех современных браузерах (Chrome, Safari начиная с версии 14, Firefox и Edge). Если нужна совместимость с очень старыми устройствами, выберите JPG.
Для чего нужны width, height и loading=lazy?
Width и height резервируют место под изображение до его загрузки, и страница не «прыгает» (CLS). Loading=lazy откладывает загрузку изображений, находящихся за пределами экрана. Не используйте lazy для главного изображения в верхней части страницы.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.