JSFiddle - React, Tailwind, and code Playground

by kazu69

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<span><img src='desktop-friendly-version.jpg' data-medium='tablet-friendly-version.jpg' data-large='desktop-friendly-version.jpg'></span>

CSS

@media all and (min-width:45em) {
    body:after {
        content: 'desktop';
        display: none;
}

JavaScript

var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

if(size == 'desktop') {
    $('img').each(function(index){
      $(this).attr(
          src: $(this).attr('data-large');
      );
    });
}
if(size == 'tablet') {
   $('img').each(function(index){
      $(this).attr(
          src: $(this).attr('data-medium');
      );
    });
}