View video tutorial

HTML Picture


<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.


<!DOCTYPE html>

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


   <h1>The picture element</h1>

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

      <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;">


Try it Now »

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