Blog

Responsive Image <picture> Element
Posted on September 8, 2020 in HTML by Matt Jennings

Definition of <picture> element according to Mozilla Development Network:
The HTML <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

Example code, including using Picturefill IE polyfill JavaScript as the <picture> element isn’t supported in IE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // Picture element HTML5 shiv
        document.createElement('picture');
    </script>
    <script src="picturefill.min.js"></script>
</head>
<body>
    <!-- visit http://scottjehl.github.io/picturefill/ for picturefill source -->
    <div class="bkgdimg"></div>
    <div>
        <picture>
            <source srcset="img/peace-pie-original.jpg" media="(min-width: 1200px)">				
            <source srcset="img/peace-pie-500.jpg" media="(min-width: 800px)">				
            <img src="img/peace-pie-150.jpg" alt="The original giant peace pie">
        </picture>
    </div>
</body>
</html>

Leave a Reply