Resize your browser window to see the img tags "change src". There are breakpoints set for "mobile first", 320px, 480px, 600px, 768px & 1024px.
Retina screens will be served an image that's twice the size, but gets scaled down.
The key is to use the intrinsic ratio technique to set the height of responsive images to 0, and give them a padding-bottom of the (width/height)*100. When the viewport width is large enough to show the images at the largest, real height, set the padding-bottom to the actual image height so the images don't continue to create unnecessary padding.
The rwdImages jQuery plugin is used to wrap the image in a span and create an overlayed clone of the image with opacity: 0 so users can download or share the image.
Content underneath that's always in the same position relative to the image