HTML: Picture Tag

By Xah Lee. Date: . Last updated: .

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

The picture tag must contain zero or more source tags, and and must have one img tag 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

HTML image tags