Why does the tool automatically reorder breakpoint sources?

Browsers evaluate ` ` elements in top-down order and use the first matching rule. Sorting from largest to smallest `min-width` ensures desktop viewports match before smaller tablet and mobile fallbacks.

What is the difference between density mode and width mode?

Density mode generates fixed multiplier candidates (e.g., 1x, 2x) for fixed-size graphics, while width mode pairs `{w}` resource widths with layout `sizes` so browsers select optimal files based on dynamic display width.

How does format layering work?

Selecting AVIF or AVIF + WebP layers adds preceding ` ` elements with swapped file extensions before standard fallback sources, enabling modern browser compression while maintaining compatibility.

Does this generator produce React-compatible markup?

Yes. Switching the flavor setting to JSX converts attributes such as `srcset` to `srcSet` and outputs self-closing ` ` and ` ` tags.

What performance attributes are added by default?

When lazy attributes are enabled, the fallback ` ` includes `loading="lazy"` and `decoding="async"` to improve initial page load performance.

Elysia Tools

Navigation

Development

Responsive Picture / srcset Art Direction Builder

Build complete <picture> markup with art-directed crops: per-breakpoint <source media> elements, 1x/2x density candidates or {w}-template width descriptors, optional AVIF/WebP format layers, sizes handling, CLS-safe width/height, plus HTML and JSX flavors with spec-based lint notes.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

2 examples

Classic three-crop hero, density mode

One line per art-directed crop, pasted small-breakpoint-first on purpose: the builder reorders them largest-first (the browser picks the first matching media query), emits a wide hero at 1280px+ and a mid crop at 768px+ with retina.js-style @2x candidates, and keeps the narrow portrait crop as the lazy-loaded <img> fallback.

<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>

Width descriptors + sizes + AVIF/WebP layers in JSX

A {w} URL template with real file widths (800/1024/1600), a sizes attribute so the browser picks by layout width instead of assuming 100vw, and AVIF+WebP layers that repeat the art-direction source per MIME type — output as React JSX with srcSet camelCase and self-closing tags.

<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>

Inputs

Options are grouped so long tools stay easier to scan.

10 options

FilesUpload source files for this workflow.1

Optional: upload crop variants instead (up to 6 images)fileOptional

Per-file max size: 20 MB / Max files: 6Supported types: image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

ContentPaste or type the main input values.5

Art-direction sources (one per line: minWidth URL [widths])textareaOptionalDensitiestextOptionalsizes attribute (w mode)textOptionalFallback <img> URLtextOptionalAlt texttextOptional

SettingsAdjust formats, ranges, numbers, and modes.3

Descriptor modeselectRequiredFormat layerselectRequiredMarkup flavorselectRequired

TogglesEnable or disable optional behavior.1

Add loading/decoding attributescheckboxOptionalEnabled when checked

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Examples that match this tool

Continue with connected tools and hubs

sources: "768 /img/hero-mid.jpg\n1280 /img/hero-wide.jpg" descriptorMode: "density" densities: "1x,2x" fallbackUrl: "/img/hero-mobile.jpg" altText: "Fresh sourdough loaves on a marble counter" formatLayer: "none" flavor: "html" lazyAttrs: true

Responsive Picture / srcset Art Direction Builder

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Three-Crop Art-Directed Hero Banner

2. Responsive Product Image with AVIF/WebP in React

FAQ

Web Image Processing Python Samples

Web Image Processing TypeScript Samples

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Data URI Generator

Batch Image Convert

Batch Image Convert

Batch Image Info Viewer

Text Redaction, Highlighting, and Presentation Formatting Tools

Image Format Conversion and Animated Export Tools

Text Case, Encoding, and Normalization Conversion Tools

Image Cleanup, Framing, and Batch Prep Tools