Генератор srcset
НовоеСоздавайте адаптивную разметку <img> с srcset и sizes из ваших значений ширины.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
Генерируйте srcset, sizes и разметку picture в одном месте
Писать разметку адаптивных изображений вручную — дело утомительное: список srcset, соответствующий атрибут sizes, блок <picture> с WebP и AVIF в качестве запасных вариантов — и одна опечатка приводит к тому, что браузер тихо скачивает не тот файл. Этот генератор srcset строит весь тег за вас: введите имя файла и нужные ширины — и получите готовый к копированию полный адаптивный элемент <img> или <picture> с правильными дескрипторами, ленивой загрузкой и асинхронным декодированием.
Это бесплатный генератор адаптивных изображений, работающий полностью в браузере — без регистрации, ничего не загружается, и он продолжает работать офлайн после загрузки страницы.
srcset и sizes: подробное объяснение
Адаптивное изображение требует двух взаимодействующих частей. srcset — это список файлов и их реальных ширин: hero-640.jpg 640w говорит браузеру, что этот файл имеет ширину 640 пикселей. sizes описывает, какой ширины будет изображение в вашем макете, например (max-width: 600px) 100vw, 600px. Браузер читает sizes, умножает на пиксельное соотношение устройства и скачивает ближайший кандидат из srcset.
Переключите дескриптор на x — получите разметку плотности пикселей: logo.png 1x, logo@2x.png 2x — идеально для изображений с фиксированным размером, таких как логотипы и иконки на экранах Retina, где дескрипторы w и sizes были бы излишними.
Когда вместо srcset стоит использовать элемент picture
Простой srcset справляется с переключением разрешений — одно изображение в разных размерах. Используйте элемент <picture>, когда нужен более тонкий контроль: подача современных форматов с запасным вариантом или арт-дирекшн (разные кадрирования для мобильных и десктопных устройств).
В режиме <picture> инструмент выводит <source type="image/avif">, <source type="image/webp"> и запасной <img> в формате JPEG или PNG — современные браузеры получат самый лёгкий формат, а старые браузеры по-прежнему увидят изображение.
Изменение размера изображения до каждой ширины — локально
Разметка — лишь половина работы: нужны ещё и сами файлы изменённого размера. Перетащите изображение в инструмент, и он изменит его размер до каждой из указанных ширин прямо на HTML-холсте, после чего вы сможете скачать весь набор с именами файлов, точно совпадающими с созданной разметкой (hero-320.jpg, hero-640.jpg и т. д.).
Никакой загрузки, никакого конвейера сборки. Так как увеличение сверх оригинала добавляет лишь размытость, инструмент помечает любую ширину, превышающую исходную, чтобы ваш набор изображений оставался точным.
Сравнение с Squoosh, Responsivebreakpoints.com и Cloudflare Image Resize
Squoosh (от Google) великолепен для сжатия и конвертации одиночных изображений — отличный выбор для подбора нужного качества WebP или AVIF. Но он не генерирует разметку srcset и не создаёт полный тег адаптивного изображения для вставки в HTML. Это инструмент сжатия, а не генератор разметки.
Responsivebreakpoints.com от Cloudinary загружает ваше изображение на серверы Cloudinary для расчёта оптимальных точек останова и создания изображений изменённого размера. Результаты неплохие, но файл покидает ваш компьютер, и применяются условия Cloudinary. Cloudflare Image Resize и Imgix — CDN-сервисы, которые обрабатывают изображения при доставке, но требуют настройки аккаунта, интеграции API и регулярных платежей. Генератор srcset UtiloKit занимает иную позицию: генерирует полную HTML-разметку и изменяет размер изображений локально на стороне клиента — без загрузки, без аккаунта, без оплаты и без ограничений на размер файла.
Ширины, точки останова и Core Web Vitals
Надёжный набор ширин: 320, 640, 960, 1280 и 1920 — примерно удваиваясь на каждом шаге, он охватывает смартфоны и крупные Retina-дисплеи; добавьте 2560 для полноширинных hero-изображений. Подача изображения нужного размера — один из самых значимых вкладов в Core Web Vitals: меньше байт означает более быстрый Largest Contentful Paint, а добавление атрибутов width и height предотвращает сдвиг макета (CLS), ухудшающий как пользовательский опыт, так и позиции в поиске.
Добавьте loading="lazy" к внеэкранным изображениям, чтобы они загружались только при прокрутке, и fetchpriority="high" к hero-изображению, чтобы оно загружалось первым — оба параметра переключаются здесь одним кликом.
Конфиденциально, мгновенно и офлайн — работает на любом устройстве
Ничего устанавливать не нужно, создавать аккаунт — тоже. Каждый тег собирается в вашем браузере по мере ввода, а любое изображение, которое вы изменяете в размере, обрабатывается локально через Canvas API — ничего не загружается. Генератор работает офлайн после загрузки страницы, так что вы можете создавать адаптивную разметку img srcset и <picture> где угодно — в самолёте, на телефоне, без Wi-Fi.
Frequently asked questions
Что такое srcset и зачем он нужен?
Атрибут srcset позволяет перечислить несколько версий одного изображения разной ширины, чтобы браузер мог загрузить ту, что лучше всего подходит устройству. Вместо того чтобы отправлять всем посетителям один большой файл, вы пишете srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" — и браузер выбирает наименьшее изображение, которое всё ещё выглядит чётко, экономя трафик на телефонах и отдавая резкие изображения на Retina-ноутбуках. Без JavaScript.
Когда стоит использовать srcset?
Используйте srcset всякий раз, когда изображение отображается в разных размерах на разных экранах — hero-баннеры, изображения в статьях, фотографии товаров, всё гибкое. Это правильный инструмент для переключения разрешений: одно и то же изображение, просто больше или меньше. Если нужно менять кадрирование или само изображение на определённых точках останова (арт-дирекшн), используйте элемент picture. Маленькие иконки и логотипы фиксированного размера не нуждаются в srcset вообще.
Как совместно использовать srcset и sizes?
srcset перечисляет файлы и их реальные ширины в пикселях (640w означает, что файл шириной 640 пикселей); sizes сообщает браузеру, какой ширины будет изображение до расчёта макета. Вместе: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". Браузер читает sizes — 'полная ширина вьюпорта при ширине до 600px, иначе 600px' — вычисляет нужные пиксели (ширина отображения × пиксельное соотношение устройства) и выбирает ближайший кандидат из srcset.
В чём разница между дескрипторами w и x?
Дескрипторы w описывают реальную ширину каждого файла в пикселях — image-640.jpg 640w — и должны использоваться вместе с sizes; браузер сам производит расчёты для любого экрана. Дескрипторы x описывают только плотность пикселей — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — и подходят для изображений фиксированного размера, например логотипа, которому нужно лишь выглядеть чётко на Retina-экранах. Используйте w для гибких изображений, управляемых макетом, и x — для изображений с фиксированными размерами.
Как подавать WebP и AVIF с запасным вариантом?
Используйте picture с одним source для каждого современного формата и обычный img в качестве запасного варианта: source type="image/avif" srcset="…", затем source type="image/webp" srcset="…", затем img src="hero.jpg" …. Браузер использует первый поддерживаемый формат и откатывается на JPEG или PNG img, если ни один не поддерживается — старые браузеры всё равно увидят изображение. Включите AVIF и WebP в режиме picture — инструмент сгенерирует весь блок, включая все дескрипторы.
Какие ширины изображений следует генерировать?
Надёжный универсальный набор — 320, 640, 960, 1280 и 1920, примерно удваиваясь на каждом шаге, охватывает от маленьких телефонов до больших Retina-экранов. Для полноширинных hero-изображений добавьте 2560; для контента, никогда не превышающего, допустим, 800px в ширину, не нужно ничего шире примерно 1600 (800 × 2 для Retina). Не генерируйте так много размеров, чтобы шаги утрачивали смысл; четырёх-шести ширин обычно вполне достаточно.
Почему мой srcset не работает?
Обычные причины: (1) вы тестируете на экране, где браузер правильно решил, что самый большой файл не нужен — измените размер окна или переключитесь на медленное соединение, чтобы увидеть переключение; (2) sizes отсутствует или неверен, и браузер предполагает 100vw и скачивает большой файл; (3) указанные файлы фактически не существуют по этим путям (проверьте вкладку «Сеть» на 404-ошибки); (4) кэш отдаёт уже загруженный размер. srcset — это подсказка, и браузеру разрешено выбирать более крупное кэшированное изображение — так задумано.
Related tools
Все инструменты
Новое Экранирование / разэкранирование JSON
Экранируйте сырой текст в безопасную строку JSON и разэкранируйте обратно.
Новое Коды состояния HTTP
Удобный справочник кодов состояния HTTP с понятными объяснениями.
Новое Шпаргалка по regex
Удобный справочник токенов и флагов регулярных выражений.
Новое Таблица ASCII
Удобные коды символов в десятичном, шестнадцатеричном, восьмеричном и двоичном виде.
Новое Конвертер PX в REM
Переводите между px, rem, em и pt относительно корневого размера шрифта.
Новое Конвертер столбцов таблиц
Переводите номер столбца таблицы в букву (1 → A) и обратно.