PICTURE <picture> Tag

by Jai 08-Aug-19

0 110


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

PICTURE <picture> Tag


Share:


Discount Coupons

SEMRush FREE Trial – PRO Account for 14 Days

FREE Pro Account worth $99.95 for 14 Days.



Comments

    No Comments Yet.

Leave a Reply