<img src="dpi_2x.png" width="50" height="50">

<img src="dpi.png" hidpi="dpi_2x.png" tridpi="dpi_3x.png" width="50" height="50">

$(document).ready(function(){
	if(window.devicePixelRatio>=2){
		$('img[hidpi]').each(function(){
$(this).attr('src',$(this).attr('hidpi'));	
		});
	}
});

<div id="cssback" style="width:50px;height50px;background:url(dpi.png);">DIV</div>

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #cssback {
    background-image:url(dpi_2x.png) !important;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px; 
    /* Size must be defined after background-image ! */
  }
}

document.write(window.devicePixelRatio);