Responsive & Retina Content Images using simple CSS, a spacer PNG and jQuery to allow for sharing/downloading of the image

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.

jQuery is used to create an overlayed clone of the image with opacity: 0 so users can download or share the image.

A majestic line of Emperor penguins

Content underneath