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">
    <meta charset="UTF-8">
        // Picture element HTML5 shiv
    <script src="picturefill.min.js"></script>
    <!-- visit for picturefill source -->
    <div class="bkgdimg"></div>
            <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">

Leave a Reply

To Top ↑