CodePen

HTML

            
              <img src="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">
            
          
!
via HTML Inspector

CSS

            
              $breakpoints: 31em 60em 75em;
$breakpoint-aliases: medium large x-large;

@mixin responsive-images {
  
  @each $alias in $breakpoint-aliases {
    $key: index($breakpoint-aliases, $alias);

    @media (min-width: nth($breakpoints, $key)) {
      img[data-#{$alias}] { 
        content: attr(data-#{$alias} url);
      }
    } 
  }
}

@include responsive-images;

/* OUTPUT:

@media (min-width: 31em) {
  img[data-medium] {
    content: attr(data-medium url);
  }
}
@media (min-width: 60em) {
  img[data-large] {
    content: attr(data-large url);
  }
}
@media (min-width: 75em) {
  img[data-x-large] {
    content: attr(data-x-large url);
  }
}

*/


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................