Генератор адаптивных изображений (srcset и sizes)
Выберите изображение, ширину и то, как оно выглядит на странице. Телефоны загрузят маленькую версию, а большие экраны — крупную, без лишних действий с вашей стороны.
Как пользоватьсяПодходящее фото для каждого экрана
Доступно на: 
Генератор адаптивных изображений (srcset и sizes): для чего нужен
Адаптивные изображения позволяют телефону загружать маленькое фото, а большому экрану — крупное, благодаря чему сайт работает быстрее без потери чёткости. Для этого нужно несколько размеров одного фото и код с srcset и sizes.
Загрузите изображение, выберите ширину, формат и качество и скачайте все версии в одном .zip. Код получается готовым: srcset, sizes в соответствии с местом изображения на странице, width и height, чтобы макет не прыгал, loading=lazy или fetchpriority=high (с preload) для главного изображения и, по желанию, <picture> с запасным JPG.
Как пользоваться
- Выберите изображение.
- Задайте ширину, формат и место на странице.
- Скачайте .zip и скопируйте код.
Когда использовать
- Фото товаров в интернет-магазинах.
- Главное изображение посадочных страниц.
- Галереи и блоги.
Частые вопросы
Что делают srcset и sizes?
srcset перечисляет версии одного изображения с шириной каждой (например, 640w, 1280w). sizes сообщает, сколько места изображение занимает на экране. Благодаря им браузер выбирает наименьшую версию, которая остаётся чёткой на этом экране, и телефон не загружает фото в 2000 px.
Зачем width и height в теге?
С width и height браузер резервирует место под изображение до его загрузки, и текст не прыгает вниз, когда появляется фото. Это улучшает CLS — один из показателей Core Web Vitals от Google.
Когда использовать loading=lazy?
Для изображений, расположенных ниже на странице. Главное изображение, видимое сразу при открытии, никогда не должно быть lazy: ему нужен fetchpriority=high, чтобы оно загружалось как можно раньше.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.