delete src-attribute with CSS and replace with bg-image

On high-density devices like the new iPad you can replace an image by a high-desity image in the background.

HTML

<h2>Outside high-desity devices this is a cat</h2>
<img id="replace" src="http://placekitten.com/g/300/200">

<h2>This is the replacement image</h2>
<img src="http://placekitten.com/g/600/400">

CSS

@media (max-width: 767px) {
  
}
    img#replace {
        content: ""; 
        background-image: url("http://placekitten.com/g/600/400"); 
        width: 300px; 
        height: 200px; 
        background-size: contain; 
        display: inline-block;  /* iOS-Safari needs this */
    }
    
}

h2 { margin: 30px 0;}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}