CodePen

HTML

            
              <img data-small="https://s3.amazonaws.com/lesjames-media/breakpoint/mobile.gif" data-medium="https://s3.amazonaws.com/lesjames-media/breakpoint/tablet.gif" data-large="https://s3.amazonaws.com/lesjames-media/breakpoint/desktop.gif">
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  margin: 2em 0;
  text-align: center;
}

body::before {
  display: none;
  content: '{ "current": "small", "all": ["small"] }';
}

@media (min-width: 45.75em) {
  body::before { content: '{ "current": "medium", "all": ["small", "medium"] }' }
}

@media (min-width: 66em) {
  body::before { content: '{ "current": "large", "all": ["small", "medium", "large"] }' }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function removeQuotes(string) {
    if (typeof string === 'string' || string instanceof String) {
        string = string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, '');
    }
    return string;
}

function getBreakpoint() {
    var style = null;
    if ( window.getComputedStyle && window.getComputedStyle(document.body, '::before') ) {
        style = window.getComputedStyle(document.body, '::before');
        style = style.content;
    }
    return JSON.parse( removeQuotes(style) );
}

function setSource() {
  var label = getBreakpoint();
  var image = document.getElementsByTagName('img');
  for (var i = 0; i < image.length; i++) {
    var source = image[i].getAttribute('data-' + label.current);
    image[i].src = source;
  }
}

document.addEventListener("DOMContentLoaded", setSource);
window.onresize = setSource;
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................