В каком порядке должны располагаться элементы source media?

При использовании условий min-width источники сортируются по убыванию ширины, чтобы браузер выбирал первое подходящее правило.

Чем отличается режим плотности (density) от дескрипторов ширины (w)?

Режим density задает фиксированные множители (1x, 2x), а дескрипторы ширины с атрибутом sizes позволяют браузеру выбирать файл на основе реального размера контейнера.

Как работают слои форматов AVIF и WebP?

Генератор создает дополнительные теги с типом image/avif и image/webp перед исходным форматом, заменяя расширения файлов.

Зачем нужны атрибуты loading и decoding?

loading="lazy" откладывает загрузку внеэкранных картинок, а decoding="async" предотвращает блокировку основного потока при декодировании.

Подходит ли сгенерированный код для React-компонентов?

Да, при выборе диалекта JSX генерируются корректные атрибуты camelCase (srcSet) и самозакрывающиеся теги.

Elysia Tools

Навигация

Development

Конструктор art direction для responsive Picture / srcset

Генерирует полную разметку <picture> с art-direction-кропами: элементы <source media> на каждый брейкпоинт, кандидаты 1x/2x или w-дескрипторы по шаблону {w}, опциональные слои AVIF/WebP, работа с sizes, width/height против CLS, варианты HTML и JSX и lint-заметки по спецификации.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Классический hero с тремя кропами, режим плотности

По строке на каждый art-direction-кроп: широкий hero от 1280px, средний кроп от 768px, а узкий вертикальный кроп — фолбэк <img>. Плотности 1x,2x дают кандидатов @2x в стиле retina.js, а атрибуты loading/decoding не дают hero блокировать критический путь.

<section class="pb-wrap">breakpoint ladder 1280→768→img · <picture> HTML block with two media sources (1x/@2x candidates) and a lazy fallback img · JSX twin · clean lint banner</section>

Дескрипторы ширины + sizes + слои AVIF/WebP в JSX

URL-шаблон с {w} и реальными ширинами файлов (800/1024/1600), атрибут sizes, чтобы браузер выбирал по ширине раскладки, а не предполагал 100vw, и слои AVIF+WebP, повторяющие источник для каждого MIME — вывод в React JSX с camelCase srcSet и самозакрывающимися тегами.

<section class="pb-wrap">breakpoint ladder 1024→img · JSX block: three <source> elements (avif/webp/original) each with srcSet="…{800w,1024w,1600w}" and sizes · lint note about combining art-direction media with media conditions inside sizes</section>

Ввод

Параметры сгруппированы, чтобы длинные формы было проще просматривать.

10 параметров

ФайлыЗагрузите исходные файлы для этого сценария.1

Опционально: загрузить обрезанные варианты вместо этого (до 6 изображений)fileНеобязательно

Максимальный размер каждого файла: 20 MB / Макс. файлов: 6Поддерживаемые типы: image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

СодержимоеВставьте или введите основные значения.5

Источники art direction (по одной в строке: minWidth URL [ширины])textareaНеобязательноПлотностиtextНеобязательноАтрибут sizes (режим w)textНеобязательноURL резервного <img>textНеобязательноАльтернативный текстtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.3

Режим дескрипторовselectОбязательноСлой форматаselectОбязательноДиалект разметкиselectОбязательно

ПереключателиВключайте или отключайте дополнительные режимы.1

Добавить атрибуты loading/decodingcheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Продолжить с похожими инструментами и темами

sources: "768 /img/hero-mid.jpg\n1280 /img/hero-wide.jpg" descriptorMode: "density" densities: "1x,2x" fallbackUrl: "/img/hero-mobile.jpg" altText: "Свежий хлеб на мраморной столешнице" flavor: "html" lazyAttrs: true

Конструктор art direction для responsive Picture / srcset

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Hero-баннер с тремя кропами и Retina-дескрипторами

2. Адаптивное изображение товара с AVIF/WebP в React

FAQ

Примеры Обработки Изображений Web Python

Примеры Обработки Изображений Web TypeScript

Примеры Обработки Изображений Android Java

Примеры Обработки Изображений Android Kotlin

Генератор Data URI

Массовое преобразование изображений

Пакетное Преобразование Изображений

Просмотр Информации об Изображениях Пакетом

Инструменты маскирования, подсветки и форматирования текста

Инструменты конвертации форматов изображений и анимированного экспорта

Инструменты конвертации регистра, кодировки и нормализации текста

Инструменты для очистки, оформления и пакетной подготовки изображений