HTML HTML picture Tag Generator
Need a different image on mobile, or a modern WebP with a safe JPEG fallback? The <picture> element gives you full control. Add your sources and media queries below and copy clean, correctly nested markup.
How the picture element works
The <picture> element is a wrapper. Inside it you put one or more <source> elements and exactly one <img>. The browser checks each source from top to bottom and uses the first one whose media query or type matches. If none match, the plain <img> takes over. That img is also where your alt text lives.
<picture> <source srcset="hero-mobile.jpg" media="(max-width: 600px)"> <img src="hero.jpg" alt="Hero"> </picture>
Two superpowers
Art direction
Show a tight, punchy crop on phones and the full wide shot on desktop. Same subject, framed right for every screen.
Format fallbacks
Offer a tiny WebP or AVIF first and fall back to JPEG or PNG for older browsers, all without any JavaScript.
Zero scripting
It is pure HTML. The browser does the choosing, so there is nothing to load, parse or maintain.
Graceful fallback
Anything that does not understand picture simply uses the inner img. Nobody is left with a broken image.
How to use the generator
- Add a source per breakpoint. Enter the image URL and the media query that should trigger it, like
(max-width: 600px). - Order matters. Put the most specific or smallest-screen sources first. The browser uses the first match.
- Set the fallback img. Give it a sensible default image and real alt text.
- Copy the markup. Paste the nicely nested picture element into your page.
Picture vs srcset, quickly
If you only need the same image at different sizes, plain srcset and sizes on an img is simpler. Reach for picture when the decision is about which image, not just how big, such as a different crop or a different file format.
Frequently asked questions
What is the HTML picture element?
It wraps several source elements and one img. The browser walks the sources in order and uses the first whose media query or type matches, falling back to the img if none do.
When should I use picture instead of srcset?
Use picture for art direction, like a cropped image on mobile, or to offer modern formats such as WebP with a JPEG fallback. Use plain srcset when you only need the same image at different sizes.
Is the inner img required?
Yes. The img inside picture is required. It provides the fallback, carries the alt text, and is what actually renders the chosen image.
Can I mix picture with srcset?
Absolutely. Each source can have its own srcset and sizes, so you get art direction and resolution switching at the same time.
Further reading: the MDN picture element reference, web.dev on the picture element, and picture support on Can I Use.
Creating those different crops and formats? Convert and compress them here first.
Convert & Compare Formats→