Skip to content

Instantly share code, notes, and snippets.

@ryanburgess
Last active December 30, 2015 17:49
Show Gist options
  • Save ryanburgess/7863918 to your computer and use it in GitHub Desktop.
Save ryanburgess/7863918 to your computer and use it in GitHub Desktop.
A simple way to use inline retina images. Add the class "retina" to the inline image and make sure to have a retina version of the image in the same directory using the same naming convention just appending "@2x" to the end.
// Checking for Retina Devices
var query = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\
(min-device-pixel-ratio: 1.5),\
(min-resolution: 144dpi),\
(min-resolution: 1.5dppx)";
if (window.devicePixelRatio > 1 || (window.matchMedia && window.matchMedia(query).matches)) {
// Replace images with retina class with @2x version if retina screen
$(".retina").each(function() {
var image = $(this).attr("src");
var ext = image.split(".").pop();
var updateImage;
if(ext == "png"){
updateImage = image.replace(".png", "@2x.png");
}else if(ext == "jpg"){
updateImage = image.replace(".jpg", "@2x.jpg");
}
$(this).attr("src", updateImage);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment