Online Tool Store
Генератор srcset
Масштабируйте изображение до нескольких ширин с помощью Canvas API и создавайте соответствующую разметку <img srcset sizes> и файлы для скачивания.
🔒 Этот инструмент работает полностью в вашем браузере. Ваши файлы никогда не загружаются на сервер.
По умолчанию используется пример градиентного изображения — загрузите своё, чтобы заменить его.
Как это работает
- Загрузите изображение (по умолчанию показан пример градиента).
- Задайте целевые ширины и основу имени файла — превью обновляются мгновенно.
- Настройте атрибут "sizes" так, чтобы он соответствовал тому, как изображение отображается в вашей вёрстке.
- Скопируйте сгенерированную разметку и скачайте масштабированные файлы, чтобы разместить их рядом.
FAQ
Что на самом деле генерирует этот инструмент?
Он масштабирует загруженное изображение до каждой целевой ширины с помощью Canvas API, затем пишет соответствующую разметку <img srcset sizes>, чтобы браузеры могли выбрать нужный файл для каждого viewport.
Что писать в атрибуте "sizes"?
CSS-подобное описание того, насколько широко изображение отображается при разных viewport, например "(max-width: 768px) 100vw, 50vw" означает, что оно заполняет viewport на мобильных и половину viewport на больших экранах. Приведите его в соответствие с вашей реальной вёрсткой.
Нужно ли загружать масштабированные файлы самому?
Да — "Скачать все размеры" сохраняет каждый масштабированный JPEG на ваше устройство с именем файла, соответствующим сгенерированной разметке (например, photo-640w.jpg). Загрузите их на ваш хостинг изображений или CDN по тем же путям.
Почему скачиваемые файлы — JPEG, а не исходный формат?
JPEG сохраняет размеры файлов небольшими и предсказуемыми для доставки адаптивных фото. Если вам нужен вывод PNG или WebP для прозрачности или лучшего сжатия, масштабируйте потом отдельным конвертером изображений.
Загружается ли моё изображение куда-либо?
Нет. Масштабирование происходит локально на <canvas> в вашем браузере — исходный файл никогда не покидает ваше устройство.
Как мы выглядим на фоне других
| Возможность | Online Tool Store | Ручное масштабирование в редакторе изображений | Сервисы автоматического масштабирования изображений CDN |
|---|---|---|---|
| Автоматически генерирует соответствующую разметку | ✓ | ✗ | Зависит от сервиса |
| Не нужен аккаунт или бэкенд | ✓ | ✓ | ✗ |
| Бесплатно, без платы за изображение | ✓ | ✓ | Оплата по использованию |
Если вам нужен просто разовый набор адаптивных изображений и соответствующая разметка — без шага сборки, без аккаунта CDN — этот инструмент создаёт и то и другое на одной странице.