Генератор адаптивных изображений
Генерация размеров изображений srcset для быстрых веб-страниц
Создавайте несколько ширин изображений для адаптивных макетов за один раз. Экспортируйте распространённые брейкпоинты и копируйте HTML или Next.js код прямо в ваш проект.
Локальная обработка — без загрузкиСоздать адаптивные изображения
Загрузите изображение и выберите размеры. Выбирайте коэффициенты масштабирования, ширины брейкпоинтов или добавляйте собственные размеры.
Совет: Начните с изображения высокого разрешения для наилучших результатов во всех размерах.
Загрузите или перетащите изображения
Поддерживаются файлы PNG, JPG и WebP до 25 МБ каждый. Файлы никогда не покидают ваш браузер.
Перетащите изображения или кликните для выбора
PNG, JPG, WebP
Генерация изображений с различными коэффициентами относительно исходного размера
Распространённые ширины viewport для srcset — выберите нужные размеры
5 sizes selected
Адаптивные изображения позволяют браузерам выбирать правильный размер для каждого устройства, улучшая время загрузки и Core Web Vitals. Этот инструмент генерирует распространённые варианты ширины из одного исходного изображения.
Загрузите один раз, экспортируйте размеры от 320px до 1920px и получите готовую разметку srcset. Всё выполняется локально — ваши изображения остаются приватными.
Несколько брейкпоинтов сразу
Генерируйте ширины 320, 640, 960, 1280 и 1920px за один пакетный экспорт.
Готовые к копированию фрагменты кода
Получите HTML srcset или разметку Next.js Image, готовую для вставки в ваш код.
Оптимизировано для LCP
Подавайте изображения подходящего размера для улучшения показателей Largest Contentful Paint.
Рекомендуемые адаптивные брейкпоинты
Распространённые ширины, охватывающие мобильные, планшетные и десктопные viewport'ы.
Как генерировать адаптивные изображения
Создавайте оптимизированные варианты изображений для srcset за несколько шагов.
Загрузите исходное изображение
Выберите JPG, PNG или WebP высокого разрешения. Большее исходное изображение даёт более чёткие результаты при уменьшении.
Добавьте адаптивные размеры
Используйте мульти-размерный экспорт для добавления ширин 320, 640, 960, 1280 и 1920px.
Сохраняйте соотношение сторон заблокированным, чтобы сохранить оригинальные пропорции для всех размеров.
Обработайте и скачайте
Нажмите Изменить размер, чтобы сгенерировать все варианты, затем скачайте каждый файл или все сразу.
Скопируйте фрагмент srcset
Используйте сгенерированный HTML или Next.js фрагмент для добавления адаптивных изображений на ваши страницы.
Когда использовать адаптивные изображения
Hero и баннерные изображения
Подавайте 1920px на десктопы и меньшие файлы на телефоны, резко сокращая время загрузки для мобильных пользователей.
Миниатюры блога и статей
Генерируйте несколько ширин, чтобы читатели на любом устройстве получали быстрый и чёткий превью.
Фотографии товаров e-commerce
Предоставляйте изображения подходящего размера для улучшения скорости страницы и конверсии.
Возможности
Пакетный мульти-размерный экспорт
Добавляйте несколько ширин и генерируйте все из одного источника за один проход.
Сохранение соотношения сторон
Высота масштабируется пропорционально, поэтому изображения никогда не растягиваются и не сжимаются.
Готовый к использованию код
Копируйте HTML srcset или фрагменты для конкретных фреймворков прямо в ваш проект.
Приватно и локально
Вся обработка происходит в вашем браузере. Изображения никогда не загружаются на сервер.
Часто задаваемые вопросы об адаптивных изображениях
Как писать атрибут sizes?
Атрибут sizes сообщает браузеру, какой ширины будет изображение при каждом viewport. Например, `(max-width: 640px) 100vw, 50vw` означает полную ширину viewport на маленьких экранах и половину на больших. Настройте под ваш CSS-макет.
Сколько брейкпоинтов использовать?
Пять-семь ширин от мобильных до десктопных — хороший стандарт. Больше размеров добавляют гибкости, но увеличивают хранилище. Начните с 320, 640, 960, 1280 и 1920 и корректируйте на основе аналитики.
Как быть с 2x retina изображениями?
Браузеры выбирают из srcset по ширине viewport и плотности пикселей. Если ваш самый большой источник 1920px, retina-телефон может выбрать версию 1280px. Предоставьте большие ширины, если важна чёткость на retina.
Как это помогает Largest Contentful Paint (LCP)?
LCP измеряет, как быстро загружается самый большой видимый элемент. Подавая меньшие изображения на мобильные, вы передаёте меньше байт и рендерите hero быстрее, напрямую улучшая показатель Core Web Vitals.
Можно ли использовать эти изображения с компонентом Image в Next.js?
Да. При самостоятельном хостинге разместите файлы в /public и настройте источники изображений соответственно. Для большего контроля встроенный loader Next.js тоже может генерировать размеры на лету, но предгенерация может снизить нагрузку на сервер.
Нужно ли конвертировать в WebP или AVIF?
Современные форматы ещё больше уменьшают размер файлов. Вы можете конвертировать на отдельном шаге или использовать инструменты squoosh вместе с этим генератором. Браузеры, поддерживающие формат, загрузят меньшие файлы, остальные откатятся к JPG/PNG.
Открыть изменение размера
Готовы генерировать адаптивные изображения? Загрузите фото и экспортируйте несколько ширин для вашего сайта.
Открыть изменение размера