Timeline Taxi Out now: my sci-fi novel Timeline Taxi is published!

Responsive images as CSS background

Integrating the Responsive Images spec together with CSS backgrounds, allowing for more flexibility for eg. hero images because you can use background-size: cover; etc., and still have the full benefits of responsive image loading.

<html>
<head>
    <style>
        img {
            width:100%;
        }
        img.loaded {
            display: none;
        }
        .responsive-image {
            width:100%;
            height:500px;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="responsive-image">
        <img src="./small.jpg" srcset="./large.png 3000w, ./medium.jpg 1920w, ./small.jpg 425w" >
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('.responsive-image');
            
            [].forEach.call(images, function (imageContainer) {
                const image = imageContainer.querySelector('img');
                
                image.addEventListener('load', function () {
                    if (!image.currentSrc) {
                        return;
                    }
                    
                    imageContainer.style['background-image'] = "url('" + image.currentSrc + "')";
                    image.classList.add('loaded');
                });
            })
        });
    </script>
</body>
</html>