HTML: Picture Tag

By Xah Lee. Date: . Last updated: .

The <picture> is similar to the <img> tag. It is for inline image with multiple sources for browser to chose a right size for user's device. is invented sometimes around 2015.

The <picture> must contain zero or more <source> tags, and and must have one <img> at the end.

<picture>
 <source media="(min-width:1000px)" srcset="cat_big.jpg">
 <source media="(min-width:500px)" srcset="cat_small.jpg">
 <img src="cat.jpg" alt="cat">
</picture>

See also: CSS: Media Query

JS in Depth
XAH
Buy Xah JavaScript Tutorial

HTML Basics

HTML Table

Misc

HTML4 Frameset