HTML <picture> Tag

In this blog about HTML <picture> Tag, we will see how that happens HTML <picture> Tag is used in responsive web designing where we need to load different images based on their viewport, height, width, orientation, and pixel density.

The <picture> Tag consists of one or more <source> elements and an <img> Tag. Using which we can show images. Media query inside the source tag will be for him to do.

Depending on the viewport, matching images will be loaded from different <source> Tags, and if no source contains a matching image, the default image in the <img> Tag will be displayed on the browser.


<!DOCTYPE html>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
        HTML picture Tag

<style type="text/css">
    padding: 0;
    margin: 0;
    box-sizing: border-box;
<h1 style="margin-bottom: 50px; ">This is HTML picture tag Example</h1>    
    <source srcset="" media="(min-width: 1050px)">
    <source srcset="" media="(min-width: 750px)">  
    <source srcset="" media="(min-width: 450px)">  
    <img srcset="" alt="default image" style="width: auto;">  


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *