JSFiddle - React, Tailwind, and code Playground

HTML

<
divclass="demo-box">
    <span class="magik-responsive-image" id="image-01">
        <img src="http://dummyimage.com/400x300/cdcdcd/000/?text=lo-res">
        <style scoped>
            @media screen and (min-width: 601px){#image-01{background-image:url(http://dummyimage.com/800x600/ababab/000/?text=hi-res);}}
        </style>
    </span>
</div>

CSS

.magik-responsive-image {
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
}

.magik-responsive-image img {
    max-width: 100%;
}

@media screen and (min-width: 601px) {

    .magik-responsive-image img{
        opacity: 0;
    }

}

/* demo code */

.demo-box {
    margin: 0 auto;
    width: 50%;
}

JavaScript

/*

NO JavaScript :-)

Change the size of the HTML pane to the right to see the effect

*/