HTML PICTURE <picture> Tag

0 2447

The <picture> tag, one of the latest tags in HTML5 constitutes of one <img> elements and many other <source> elements. This <picture tag> is preferable for loading images on the website depending upon their pixels, height, orientation, and width.

The matching image will be loaded in context to a different <source> tag. On the unavailability of any matching image, the default image inside <img> tag will be displayed across the browser.

Note: This tag is a new tag in HTML5.

Program:

<!DOCTYPE html>
<html> 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Picture Tag </title>
</head>
<body>
<h2>Example of picture tag</h2>
<picture>
  <source media="(min-width: 650px)" srcset="download.jpg">
  <source media="(min-width: 465px)" srcset="download.jpg">
  <img src="download.jpg" alt="php" style="width:auto;">
</picture>
</body>     
</html>

Output: