CodePen

HTML

            
              <a href="https://dl.dropboxusercontent.com/u/3307294/mfp/test-image.jpg" title="Test caption" class="image-link">Has Retina image</a>

<a href="http://www.polyxostudios.de/wp-content/uploads/2012/07/IMG_2588-bearbeitet2-900x602.jpg" title="Test caption" class="image-link">No Retina image</a>

<!-- 
Name of retina image should end with @2x, e.g: 
https://dl.dropboxusercontent.com/u/3307294/mfp/test-image@2x.jpg
-->
            
          
!
via HTML Inspector

CSS

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

JS

            
              $('.image-link').magnificPopup({ 
  type: 'image',

  retina: {

    
    ratio: 2, // Increase this number to enable retina image support.
	    // Image in popup will be scaled down by this number.
	    // Option can also be a function which should return a number (in case you support multiple ratios). For example:
	    // ratio: function() { return window.devicePixelRatio === 1.5 ? 1.5 : 2  }
   
	    replaceSrc: function(item, ratio) {
	    function checkRetina(url) {
	    var retinasyntax = '';
	        $.ajax({
	             url: url,
	             async: false,
	             type: "HEAD",
				success:
				   function() {
				    retinasyntax = '@2x';
				    },
	           });
	           return retinasyntax;
	    }
      
	   	possibleRetina = item.src.replace(/\.\w+$/, function(m) { return '@2x' + m; });
	    existingratio = checkRetina(possibleRetina);
   
	    return item.src.replace(/\.\w+$/, function(m) { return existingratio + m; });
	    } // function that changes image source
  

  }

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