High-dpi images

mixins.scss

@mixin hidpi {
	@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        @content;
	}
}

@mixin image2x($name, $extension: 'jpg', $size: auto, $position: null, $repeat: null) {
	@if $size != auto {
		background-size: $size;
	}
	@if $repeat != null {
		background-repeat: $repeat;
	}
	@if $position != null {
		background-position: $position;
	}
	background-image: url('../images/#{$name}.#{$extension}');
	@include hidpi {
		background-image: url('../images/#{$name}@2x.#{$extension}');
	}
}

// Usage:

.icon--play {
	@include image2x('icon--play', 'png', contain);
}

srcset.html

<!-- Any device that could possibly have a high-density display will support srcset -->
<!-- http://caniuse.com/#feat=srcset -->

<img alt="Important image oh man"
	src="/img/some_image.jpg"
	srcset="/img/some_image.jpg 1x, /img/[email protected] 2x"
/>