Retina Article: Image tag reference

css_backgrounds.css

.logo {
  background:url('/your_logo.png');
  height:50px;
  width:150px;
}

@media only all and (-webkit-min-device-pixel-ratio: 2) {
  /* Media query for double density devices */
  
  .logo {
    background:url(/your_larger_logo.png); /* This is your double size image */
    background-size:150px 50px; /* Make sure the double size image is displayed within the original size */
  }

}

image_tag.html

<img src="http://www.gravatar.com/avatar/068ce5abf934fd1ae13067300a36d160?s=125" class="hi-res-available" data-rel="http://www.gravatar.com/avatar/068ce5abf934fd1ae13067300a36d160?s=250" width="125">

javascript_retina.js

// Query the device pixel ratio.
//-------------------------------
function getDevicePixelRatio() {
	if(window.devicePixelRatio === undefined) return 1; // No pixel ratio available. Assume 1:1.
	return window.devicePixelRatio;

}

// Process all document images marked as highres-available
// If the screen is (approx) 800 or bigger across (high-res tablet upwards)
//-----------------------------
function processTaggedImages() {
  
	if (getDevicePixelRatio() > 1 && $(window).width() >= 700) {
		$('img.high-res-available').each(function(i, image) {
		  // Set the src to that in the data-rel
		  var thisDataRel = $(this).attr('data-rel');
		  if (thisDataRel) $(this).attr('src', thisDataRel);
		});
	}

}