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.
Content underneath that's always in the same position relative to the image