Use JavaScript and CSS to quickly upgrade your images for Retina displays (Retinaizer)

Retinaizer.css

div {
  background: url('/img/background.jpg');
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	
	div {
		background-image: url('/img/[email protected]');
		background-size: 100px 100px;
		// This should match the dimensions of the original resolution image
	}
}

Retinaizer.js

var Retina = (typeof window.devicePixelRatio != 'undefined' ? window.devicePixelRatio > 1 : false);

if(Retina) {
  
	var $img = document.getElementsByTagName("img");
	var i = $img.length;
	var pattern = /\.[jpg|jpeg|png]+$/i;
	var retinaizer = "@2x";
	
	while(i--) {
		
		var _src = $img[i].src;
		var _h = $img[i].height, _w = $img[i].width;
		
		if(_src && _src.match(pattern)) {
			
			var _ext = _src.match(pattern);
			_src = _src.replace(pattern, retinaizer+_ext);
			
			$img[i].src = _src;
			$img[i].height = _h+"px";
			$img[i].width = _w+"px";
		}
	}
}