Easy learning with example program codes

Picture HTML

HTML <picture> Tag

In responsive web designing, it is required to load different images based on their viewport, height, width, orientation, and pixel density, and this is where the HTML <picture> tag is used. It was introduced in HTML5. Multiple <source> elements and an <img> elements can be placed inside an HTML <picture> element. The matching image will thus be loaded, according to the viewport. The default image defined within the <img> tag is displayed when no source contains the matching image. In more simple words, the HTML <picture> element is used to make an image responsive. It is used to set more than one images depending on the browser width. The picture changes when the size of the browser changes.


<source srcset="" media="">
<img src="">


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<h2>Resize the browser width to see the effect.</h2>
  <source srcset="img_1.jpg" media="(max-width: 600px)">
  <source srcset="img.jpg" media="(max-width: 1500px)">
  <source srcset="img_2.jpg">
  <img src="img.jpg" alt="Flowers" style="width:auto;">

Output 1:

Output 2 : On Resizing.


In the above example, we made an image responsive, using the HTML <picture> element.

Tag specific attributes:

mediamedia_queryUsed to specify and to add a media query to be defined in CSS.
srcsetURLUsed to specify the image URL. It is a required attribute.





Used to indicate the MIME type.
srcURLUsed to indicate the location of the image.

Global attributes:

The HTML global attributes are supported by the HTML <picture> tag.

Event attributes:

The HTML event attributes are supported by the HTML <picture> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please follow and like us:
Posted in HTML   

Copyright © 2020 CodesJava Protection Status