<picture>



HTML <picture> Tag


The <picture> tag is used when rendering image resources to give more flexibility and options.

When used together with <img> tag and <source> tag it acts as an image that will be loaded differently depending on the devices it's displayed on.

The <picture> tag contains zero or more <source> elements and one <img> element.


Example :

<!DOCTYPE html>
<html>
<body>
    <picture>
        <source media="(min-width: 1000px)" srcset="logo-large.png">
        <source media="(max-width: 500px)" srcset="logo-small.png">
        <img src="logo-default.png" alt="My logo">
    </picture>
</body>
</html>