HTML

Responsive Image Markup Builder

Describe the image files you already have. Generate clear picture or img markup with width candidates, sizing hints and alternative text.

Ctrl / ⌘ + Enter to build

Output options

Example markup is ready. Image paths are illustrative; no assets were created or fetched.

JSON inventory · Up to 30,000 characters · URLs are never loaded

Tab indents · Esc, then Tab moves focus Ln 1, Col 1
Select and copy any part of this code. Ln 1, Col 1
Export generated HTML
HTML

This builds markup only. Create the referenced files separately, and make every width descriptor match that file’s real intrinsic width.

Connect real image files to responsive HTML

  1. Replace the example JSON with your fallback URL, intrinsic width and height, alternative text, sizes hint and existing width candidates.
  2. For picture output, add source groups with an image MIME type or media condition. A source may supply its own sizes string.
  3. Choose loading and decoding hints, build the markup, then copy or download it. The tool does not fetch URLs or generate resized images.

Width descriptors and sizes work together

A candidate such as /images/studio-800.jpg 800w declares the file’s intrinsic width. The sizes attribute describes the expected display width, such as (max-width: 720px) 100vw, 720px. The browser combines this hint with pixel density and its own selection policy. It does not promise to choose the candidate with an exact width. This builder sorts each candidate group by width and rejects duplicate widths.

Picture sources and art direction

The example offers WebP candidates before a JPEG fallback. Source groups can also use a media condition for a different composition. Place more specific sources first because their order is retained. The fallback image always receives alt text and intrinsic dimensions. An empty alt string is supported for a deliberately decorative image; meaningful images need a useful description.

Loading hints and dimensions

Use eager loading for an image that should load immediately, especially a likely above-the-fold main image. Lazy loading is a browser hint for less urgent images. Width and height reserve an aspect ratio but do not replace responsive CSS. A typical stylesheet still uses max-width: 100%; height: auto;. If different source crops need a different ratio, adapt source dimensions and page CSS to the actual layout.

What is checked, and what is not?

The JSON model, allowed fields, URL schemes, positive dimensions and unique width descriptors are checked. Attribute values are escaped; pasted markup is never rendered. Relative paths and HTTP(S) URLs without credentials are accepted. Whitespace, literal commas, backslashes, protocol-relative URLs and active schemes such as javascript or data are rejected in image URLs. Encode a space or comma if it belongs to a path. Media and sizes strings are bounded and escaped, but this is not a complete CSS grammar validator. Review them against your stylesheet.

Limits and local processing

Input is limited to 30,000 characters, six source groups and twelve candidates per group, plus twelve fallback candidates. Width and height values range from 1 to 32,768; output is capped at 40,000 characters. The builder cannot confirm that a URL exists, that its file matches the declared width, or that its content is appropriate. Nothing is uploaded or fetched. Changing the input removes the stale output until you build again.

See MDN’s official responsive image guide and picture element reference for browser selection and source ordering.

Related Tools