Responsive & Retina Content Images using simple CSS & a spacer PNG

Resize your browser window to see the img tags "change src". There are breakpoints set for "mobile first", 320px, 480px, 600px, 768px & 1024px.

The top image is twice the size of the bottom image, but automatically gets scaled down. Perfect for retina screens.

A responsive, retina-quality image
A responsive image

The code:

img {
	background: url(jellyfish.jpg) no-repeat 0 0;
	background-size: contain;
	height: auto;
	max-width: 100%;
}

<img src="rwd-spacer-512x384.png" width="512" height="384" alt="Normal, descriptive content" />

So simple