Categories
HTML Web development

HTML picture Tag


The HTML picture element gives the users more flexibility in defining image resources.

HTML picture Tag

The HTML picture element is used for art direction in responsive designs. Instead of having one image that is scaled on the viewport width, multiple images can be designed to nicely fill the browser viewport.

The HTML <picture> tag contains two tags: one or more <source> elements and one <img> tag.

Example:

Resize the browser window to load different images:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width:650px)" srcset="https://lenadesign.org/wp-content/uploads/2022/01/css-diamond.gif">
  <source media="(min-width:465px)" srcset="https://lenadesign.org/wp-content/uploads/2021/12/cookie.png">
  <img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" alt="ghost" style="width:auto;">
</picture>

</body>
</html>

Output:

ghost

Enjoy coding!

Read also:

HTML map and area tags

HTML time tag

HTML form tag