HTML Picture Element

A single img is enough for many pages. When you need different files for different screens or formats — a wide crop on desktop, a tighter crop on phones, or a modern format with a JPEG fallback — the picture element offers candidates. The browser chooses one; your fallback img keeps older clients and accessibility covered.

What picture adds

picture is a container. Inside it you place zero or more source elements and exactly one fallback img. Each source can declare when it applies (media) or what format it is (type), and where the file lives (srcset). The img is not optional decoration: it is the required fallback and the place for alt.

Direct answer

Wrap one or more <source> elements and a fallback <img> inside <picture>. Use media for viewport conditions and type for formats such as WebP. The img still needs src and alt. Beginners can start with two widths of the same photo before collecting every modern format.

Art direction with media

Art direction means different crops or layouts for different viewports — not only “the same photo smaller.” media on source lets you point wide and narrow layouts to different files.

Reading the media sample

• Sources are listed from more specific conditions toward broader ones in common teaching patterns; the browser still evaluates and picks a match
• srcset on source points to the candidate file URL
• The final img provides src and alt when no source matches or when picture support is incomplete
• Resize the window in practice to see which file is appropriate — use DevTools network if you want to confirm the request

Format choice with type

Sometimes the same composition ships as WebP for supporting browsers and JPEG for everyone else. type tells the browser the MIME type so it can skip unsupported formats without downloading them first.

Keep day-one scope small

You do not need every format and every breakpoint on the first try. Make one picture with two sensible candidates work, keep alt honest on the img, then expand. Responsive srcset density descriptors and advanced sizes attributes come later as you grow.

alt stays on img

Do not put accessibility text only on source. Screen readers and fallback rendering rely on the img. Decorative rules from the Images session still apply: informative images need real alt; pure decoration can use alt="".

picture vs one img

Use a plain img when one file is enough. Reach for picture when you truly need different files for conditions — viewport art direction or format switching. Extra markup without a real need only complicates maintenance.

Order and fallback habits

List source elements before the img. Always include the img. If you forget the fallback, some browsers and many teaching validators will treat the pattern as incomplete. Test with a narrow window and a wide window, and with a browser that may not prefer your fancy format.

Practice in your editor

1. Prepare two image widths of the same photo (or two clear practice files).
2. Build a picture with two source media queries and one img fallback.
3. Resize the browser window and observe which file is appropriate.
4. Confirm alt remains on the img, not only in a comment.
5. Optionally add a WebP source with type="image/webp" above a JPEG img and confirm the pattern still shows an image everywhere.

Easy mistakes

• Forgetting the fallback img
• Putting alt only on source instead of on img
• Over-complicating with many formats before the basic media pattern works
• Using picture when a single optimized img would have been enough
• Mismatched crops that surprise users when the viewport crosses a breakpoint
• Confusing srcset on source with the href of a link

Summary

• picture offers multiple image candidates; the browser picks one
• Use source plus a required fallback img
• media guides viewport choice; type guides format choice
• alt stays on the img
• Start simple: two widths or one modern format plus a JPEG fallback