Подготовить изображения для адаптивного сайта
ZIP вариантов нескольких ширин, srcset/sizes и карта размеров без увеличения маленького исходника.
Можно перетащить файл сюда
PNGJPGWebP
Один файл до 10 МБ; изображение до 12 мегапикселей.
Для обработки данные передаются нашему серверу. Временные рабочие файлы удаляются; история файлов не создаётся.
Как пользоваться
Задайте ширины, которые соответствуют вашему макету. Из ZIP перенесите WebP и HTML на сайт. Скорректируйте sizes под фактическую ширину блока; готовый пример использует 100vw на небольшом экране.
В браузере проверьте выбранный currentSrc и размеры скачанного варианта.
- Задайте ширины, которые соответствуют вашему макету. Из ZIP перенесите WebP и HTML на сайт. Скорректируйте sizes под фактическую ширину блока; готовый пример использует 100vw на небольшом экране.
- В браузере проверьте выбранный currentSrc и размеры скачанного варианта.
- Скачайте результат под новым именем и сохраните исходный файл до окончательной проверки.
Пример
Практический пример: Подготовить изображения для адаптивного сайта
Изображение 960 пикселей; ширины 320,640,960
Задайте ширины, которые соответствуют вашему макету. Из ZIP перенесите WebP и HTML на сайт. Скорректируйте sizes под фактическую ширину блока; готовый пример использует 100vw на небольшом экране.
Три WebP и HTML с srcset
Форматы и ограничения
Адаптивное изображение предоставляет браузеру несколько реальных размеров одного рисунка. srcset перечисляет варианты, а sizes описывает место изображения в макете. Это позволяет не отправлять маленькому экрану ненужный большой файл. На входе: PNG, JPG, WebP. Форматы результата: WebP, HTML, ZIP.
- На входе
- PNG, JPG, WebP
- Результат
- WebP, HTML, ZIP
ZIP вариантов нескольких ширин, srcset/sizes и карта размеров без увеличения маленького исходника.
- Один файл до 10 МБ; изображение до 12 мегапикселей.
- Для пакетного редактора допускается до 20 файлов; отдельные сценарии имеют меньший предел.
- Обработка на сервере: файл нужен для выбранной операции и не попадает в историю.
В браузере проверьте выбранный currentSrc и размеры скачанного варианта.
Для выбранной операции данные передаются нашему серверу. Временные рабочие файлы удаляются после обработки; история пользовательских файлов не создаётся.
Для выбранной операции данные передаются нашему серверу. Временные рабочие файлы удаляются после обработки; история пользовательских файлов не создаётся.
Вопросы об инструменте
Какие исходные данные принимает «Подготовить изображения для адаптивного сайта»?
Поддерживаются: PNG, JPG, WebP. Один файл до 10 МБ; изображение до 12 мегапикселей.
Что получится после обработки в «Подготовить изображения для адаптивного сайта»?
ZIP вариантов нескольких ширин, srcset/sizes и карта размеров без увеличения маленького исходника. Форматы результата: WebP, HTML, ZIP.
Как проверить результат этой операции?
В браузере проверьте выбранный currentSrc и размеры скачанного варианта.
Какой пример помогает начать работу?
Изображение 960 пикселей; ширины 320,640,960. Задайте ширины, которые соответствуют вашему макету. Из ZIP перенесите WebP и HTML на сайт. Скорректируйте sizes под фактическую ширину блока; готовый пример использует 100vw на небольшом экране. Ожидаемый результат: Три WebP и HTML с srcset.
Какие ограничения нужно учитывать?
Один файл до 10 МБ; изображение до 12 мегапикселей. Для пакетного редактора допускается до 20 файлов; отдельные сценарии имеют меньший предел. Обработка на сервере: файл нужен для выбранной операции и не попадает в историю.
Где обрабатываются данные и сохраняется ли история?
Для выбранной операции данные передаются нашему серверу. Временные рабочие файлы удаляются после обработки; история пользовательских файлов не создаётся.