HTML picture - how to use <picture> tag

The HTML <picture> tag is used to define image resources on a HTML page. The <picture> tag provides more flexibility to the developer in providing the sources to images. For example, instead of specifying one image that scales up or down depending on the browser, the <picture> tag allows options to provide multiple image sources and the most suitable one is picked.

The <picture> tag uses the img and source tags. The img tag is used as the last option and browser that do not support the <picture> tag displays the image defined in the img tag. The source tags define sources of different images and conditions upon which the image would be displayed


The picture tag supports the global attributes.


<picture> <source media="(min-width: 650px)" srcset="img_650px.png"> <source media="(min-width: 450px)" srcset="img_450px.png"> <img src="img.png" alt="picture tag" style="width:auto;"> </picture>

Related HTML tags:

  • <img> - used to define an image
  • <source> - defines multiple media resources for media elements