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 — цей інструмент створює і те, і інше на одній сторінці.