Add image sources by format or media condition, set a fallback image, preview it live, and copy a complete responsive picture element.
The browser scans source elements in order and uses the first one whose type is supported and whose media query matches, falling back to the img element if nothing else applies.
List your most preferred formats, like AVIF then WebP, before more widely supported fallbacks.
Lets supporting browsers pick a modern, smaller image format automatically.
Serves an entirely different image, like a cropped mobile version, at different viewport widths.
Always required, and the only element that carries alt text for accessibility and non-supporting browsers.
The browser uses the first matching source it finds, so list your most specific or most preferred formats and media conditions before more general fallbacks.
It's shown when no source element matches, and it's also what non-supporting browsers and screen readers rely on, so it always needs real alt text.
Use it to offer a modern format like AVIF or WebP as a source, letting supporting browsers choose it while others fall back to the img element.
Use it to serve an entirely different image at different viewport widths, such as a cropped version for mobile versus a wide version for desktop.
No, alt text only lives on the fallback img element, since that's the element the accessibility tree actually exposes.
More handy tools from My Panda Toolbox.