Recently I set up GitHub sponsors, if my content helps you, you can consider a one-time or monthly sponsorship.

Responsive images as CSS background

This is where the ad would go. Instead though, I'd like to point you towards my GitHub Sponsors page. If you're a regular reader and my content is helping you, you can consider a one-time or monthly sponsorship. If you're a company looking for dedicated ad placements on this blog or my newsletter, you can email me at

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.

        img {
        img.loaded {
            display: none;
        .responsive-image {
            background-size: cover;
            background-position: center;
    <div class="responsive-image">
        <img src="./small.jpg" srcset="./large.png 3000w, ./medium.jpg 1920w, ./small.jpg 425w" >
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('.responsive-image');
            [], function (imageContainer) {
                const image = imageContainer.querySelector('img');
                image.addEventListener('load', function () {
                    if (!image.currentSrc) {
          ['background-image'] = "url('" + image.currentSrc + "')";