// generate picture elements with sources and breakpoints
Build tags. Export clean HTML instantly.
No source entries yet
Click + ADD SOURCE to add a <source> element, or load a presetConfigure settings and sources above
Click Generate to build your <picture> elementEnter the fallback <img> src, alt text, and optional width/height for the base image.
Click Add Source or load a preset. Configure each source with media query, type, srcset, and sizes.
Hit Generate to build the complete <picture> element. Copy and paste into your HTML.
The HTML <picture> element lets browsers choose the best image format and size based on media conditions. This tool generates the boilerplate with correct attribute ordering, multiple <source> entries, and a <img> fallback.
The <picture> element is an HTML container that holds multiple <source> elements and one <img> fallback. The browser evaluates each source in order and selects the first one whose media query and type conditions it satisfies.
The srcset attribute on <img> handles resolution switching — giving the browser different sizes of the same image. The <picture> element handles art direction and format switching — different crops, formats (WebP, AVIF), or images entirely depending on media conditions.
The media attribute on <source> uses standard CSS media query syntax: media="(max-width: 768px)" or media="(min-width: 1024px)". The browser uses the first matching source. Order matters — put most specific conditions first.
Yes. The <img> fallback is required and is used when no <source> matches (older browsers, or no conditions match). Use a universally supported format like JPEG or PNG for the fallback to ensure all users see an image.
The type attribute specifies the MIME type of the image: image/webp, image/avif, image/png, etc. If a browser doesn't support that MIME type, it skips that source and tries the next one. This enables format-based fallbacks without JavaScript.
The fetchpriority="high" attribute tells the browser to prioritize downloading this image over other resources. Use it only for above-the-fold hero images that are critical to the initial render. Using it on all images defeats the purpose.
Use loading="lazy" on images that are below the fold — not visible when the page first loads. It defers loading until the user scrolls near the image. Avoid it on hero or above-the-fold images as it delays their loading unnecessarily.
decoding="async" tells the browser it can decode the image off the main thread, allowing the page to continue rendering without waiting for the image to be fully decoded. It improves perceived performance and is generally safe to apply to all images.
The HTML <picture> element is a powerful responsive image container that gives web developers granular control over which image a browser downloads and displays. Rather than leaving the decision entirely to the browser (as with srcset alone), <picture> lets you specify exact conditions — screen size, orientation, supported formats — and serve the optimal image for each scenario.
💡 Looking for premium HTML templates and themes? MonsterONE offers unlimited downloads of responsive templates, UI kits, and web assets — worth checking out.
A complete <picture> element consists of three parts: zero or more <source> elements (each representing an alternative image), and one required <img> element as the fallback. The browser reads the sources in document order and uses the first one that matches. The <img> element at the end is used either when no source matches, or in browsers that don't support <picture> at all.
<picture>
<source media="(max-width: 767px)" srcset="hero-mobile.webp" type="image/webp">
<source media="(max-width: 767px)" srcset="hero-mobile.jpg">
<source srcset="hero-desktop.webp" type="image/webp">
<img src="hero-desktop.jpg" alt="Hero image" width="1200" height="600" loading="lazy" decoding="async">
</picture>One of the most common use cases for <picture> is serving modern image formats with a legacy fallback. AVIF offers the best compression rates (up to 50% smaller than JPEG at equivalent quality), followed by WebP (25–35% smaller than JPEG). By listing AVIF first, WebP second, and JPEG last, browsers automatically download the best format they support.
The type attribute on each <source> specifies the MIME type: image/avif, image/webp, image/jpeg, or image/png. Browsers that don't recognize a MIME type simply skip to the next source — no JavaScript required.
Art direction goes beyond resolution switching. It means serving a fundamentally different composition — a tighter crop for mobile, a wide panorama for desktop, or a portrait image for tall screens. This is only possible with <picture> and media attributes.
For example, a food photography hero might show a tight close-up of the dish on mobile, while the desktop version shows the full table setting with atmospheric background. The media attribute controls this: media="(max-width: 767px)" matches phones, while the fallback <img> handles desktop. The browser downloads only one image — the right one for the current viewport.
Within a <source>, the srcset attribute can list multiple image URLs with either width descriptors (800w, 1600w) or pixel density descriptors (1x, 2x). When paired with a sizes attribute describing how wide the image will render, the browser selects the most appropriate resolution — downloading a smaller file on mobile and a larger one on desktop retina screens.
Three modern attributes dramatically affect image loading performance. loading="lazy" defers off-screen images until the user scrolls near them — reducing initial page weight and Time to Interactive. decoding="async" lets the browser decode images off the main thread, preventing rendering jank. fetchpriority="high" signals that this image is critical — useful for above-the-fold hero images that should load as fast as possible.
The combination of loading="lazy" and decoding="async" is appropriate for most below-the-fold images. For hero images, use fetchpriority="high" and omit loading="lazy" to ensure the image loads at maximum priority during page initialization.
<picture> is supported by all modern browsers (Chrome, Firefox, Safari, Edge). Older browsers like Internet Explorer that don't support <picture> simply render the <img> fallback as if the wrapper element doesn't exist — which is exactly the right behavior. This makes <picture> a safe progressive enhancement: users with modern browsers get optimal images, while legacy users still see the content.
The same applies to AVIF and WebP: browsers that don't recognize the type skip those sources silently. There's no error, no JavaScript, no polyfill needed. The format negotiation is entirely declarative HTML.
<img> fallback with a universally supported format (JPEG or PNG)width and height on <img> to prevent layout shift (CLS)loading="lazy" on all below-the-fold imagesfetchpriority="high" for the one LCP (Largest Contentful Paint) image per pageIf you only need different resolutions of the same image (e.g., photo.jpg, photo@2x.jpg, photo@3x.jpg), use srcset directly on <img> — it's simpler. Use <picture> when you need format switching (WebP/AVIF fallbacks), art direction (different crops per breakpoint), or both. In practice, most production-grade responsive image setups benefit from <picture>.