Retina

July 11, 2012

Been wondering how to simply retina-ize your website? Put this at the end of your site:

$(function() {
  try {
  if (window.matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)').matches) {
    $('.autoRetina').each(function(i, e) {
      var orig_src = $(e).attr('src');
      var new_src = orig_src.replace(/^(.*?).(png|jpe?g|gif)$/i, '$1@2x.$2');
      $(e).attr('src', new_src);
    });
  }
  } catch (e) {}
});

If you’re on a Retina-equipped device, your images with the autoRetina class will automatically be replaced with their Retina counterparts. If you’re familiar with iOS development, you’ll feel right at home. If you have no clue what I’m talking about, just append @2x at the end of the filename (before the extension).

If you want to apply it to all your images (do this only if you have Retina images for all of them!), replace $('.autoRetina').each( with $('img').each(

Caveat emptor: uses jQuery. Don’t judge.