View video tutorial

HTML Picture

HTML

<picture> tag is used for image display.

HTML <picture> tag


<picture> tag uses <source> tag and <img> tag.

<picture> tag has fallback options.

If any of <source> tags display then remaining goes off. The last option work as a fallback image.

<img> tag is the last child of the <picture> tag as a fallback option if none of the source tags matches.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>

<head>
   <title>HTML Picture</title>
   <meta charset="utf-8" />
</head>

<body>

   <h1>The picture element</h1>

   <p>Resize the browser window to load different images.</p>

   <picture>
      <source media="(min-width:650px)" srcset="workplace1.jpg">
      <source media="(min-width:465px)" srcset="workplace2.jpg">
      <img src="workplace2.png" alt="workplace2" style="width:auto;">
   </picture>

</body>

</html>
Try it Now »

Click on the "See output" button to see how it works.