Mixin for responsive images using the background-image technique (as explained [here](http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/)). Takes a base file name (i.e. `background.png`), breakpoints and used postfixes (i.e. `0px` = `-xsmall` ), and a hidpi-image postfix (i.e. `@2x`). Splits the file nam…

responsive-image.mixin.less

.responsive-image( @file, @responsive-postfixes, @hidpi-postfix ) {
  @filename: `(function() { return @{file}.substring(0,@{file}.lastIndexOf('.')) })()`;
  @filetype: `(function() { return @{file}.substring(@{file}.lastIndexOf('.')) })()`;
  @amount: unit(`(function() { return Object.keys(JSON.parse(@{responsive-postfixes})).length })()`);

  .loop( @index ) when ( @index < @amount ) {
    @breakpoint: `(function() { return Object.keys(JSON.parse(@{responsive-postfixes}))[@{index}] })()`;
    @nextBreakpoint: `(function() { return ( @{index} + 1 < @{amount} ) ? Object.keys(JSON.parse(@{responsive-postfixes}))[@{index}+1] : '99999px' })()`;
    @postfix: `(function() { return JSON.parse(@{responsive-postfixes})[@{breakpoint}] })()`;
    
    @media screen and ( min-width: ~"@{breakpoint}" ) and ( max-width: ~"@{nextBreakpoint}" ){
      .hidpi-image( ~"@{filename}@{postfix}@{filetype}", ~"@{filename}@{postfix}@{hidpi-postfix}@{filetype}" );
    }

    .loop( @index + 1 );
  }
  .loop( @amount ) {}

  .loop( 0 );
}

.hidpi-image( @normal, @hidpi ) {
  background-image: url( ~"@{normal}" );

  @media
     (min--moz-device-pixel-ratio: 2),
  (-webkit-min-device-pixel-ratio: 2),
     (-moz-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2),
          (min-device-pixel-ratio: 2),
             (min-resolution: 192dpi),
              (min-resolution: 2dppx) {
    background-image: url( ~"@{hidpi}" );
  }
}

responsive-images.mixin.css

@media screen and (min-width: 0px) and (max-width: 320px) {
  .image {
    background-image: url(background-xsmall.png);
  }
}
@media screen and (min-width: 0px) and (max-width: 320px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 0px) and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 0px) and (max-width: 320px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 0px) and (max-width: 320px) and (-o-min-device-pixel-ratio: 2), screen and (min-width: 0px) and (max-width: 320px) and (min-device-pixel-ratio: 2), screen and (min-width: 0px) and (max-width: 320px) and (min-resolution: 192dpi), screen and (min-width: 0px) and (max-width: 320px) and (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .image {
    background-image: url(background-small.png);
  }
}
@media screen and (min-width: 320px) and (max-width: 767px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 320px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 320px) and (max-width: 767px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 320px) and (max-width: 767px) and (-o-min-device-pixel-ratio: 2), screen and (min-width: 320px) and (max-width: 767px) and (min-device-pixel-ratio: 2), screen and (min-width: 320px) and (max-width: 767px) and (min-resolution: 192dpi), screen and (min-width: 320px) and (max-width: 767px) and (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .image {
    background-image: url(background-medium.png);
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 767px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 767px) and (max-width: 1024px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 767px) and (max-width: 1024px) and (-o-min-device-pixel-ratio: 2), screen and (min-width: 767px) and (max-width: 1024px) and (min-device-pixel-ratio: 2), screen and (min-width: 767px) and (max-width: 1024px) and (min-resolution: 192dpi), screen and (min-width: 767px) and (max-width: 1024px) and (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .image {
    background-image: url(background-large.png);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 1024px) and (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 1024px) and (max-width: 1200px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 1024px) and (max-width: 1200px) and (-o-min-device-pixel-ratio: 2), screen and (min-width: 1024px) and (max-width: 1200px) and (min-device-pixel-ratio: 2), screen and (min-width: 1024px) and (max-width: 1200px) and (min-resolution: 192dpi), screen and (min-width: 1024px) and (max-width: 1200px) and (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}
@media screen and (min-width: 1200px) and (max-width: 99999px) {
  .image {
    background-image: url(background-xlarge.png);
  }
}
@media screen and (min-width: 1200px) and (max-width: 99999px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 1200px) and (max-width: 99999px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 1200px) and (max-width: 99999px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 1200px) and (max-width: 99999px) and (-o-min-device-pixel-ratio: 2), screen and (min-width: 1200px) and (max-width: 99999px) and (min-device-pixel-ratio: 2), screen and (min-width: 1200px) and (max-width: 99999px) and (min-resolution: 192dpi), screen and (min-width: 1200px) and (max-width: 99999px) and (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}

usage.less

.image {
  .responsive-image( 'background.png', '{"0px":"-xsmall","320px":"-small","767px":"-medium","1024px":"-large","1200px":"-xlarge"}', '@2x' );
}