PICTURE TAG

       No comments

 


  • The <picture> element in HTML is used to provide multiple sources of an image, allowing the   browser to choose the most appropriate source based on the user's device, Screen size, and other factors. This is particularly useful for responsive design and ensuring the best quality images are displayed. </picture>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Urbanist:wght@300;400;600;700;800;900&display=swap");

        html {
            font-family: "jost", sans-serif;
            font-weight: bold;
            text-align: center;
            background-color: #efefef;
            /* color: #fff; */
        }

        img {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <h1>HTML PICTURE TAG</h1>
    <picture>
        <source srcset="./images/html.webp" type="image/webp" />
        <source srcset="./images/html.jpg" type="image/jpg" />
        <source srcset="./images/html.jpeg" type="image/jpeg" />
        <source srcset="./images/html.svg" type="image/svg" />
        <img src="./images/html.png" alt="Images" width="500" />
    </picture>
</body>

</html>

0 Comments:

Post a Comment

Do leave your comments