Return to Firewoiks

Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, .

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

Posted: April 03 2012

This technique has been superceded by Responsive & Retina Content Images Redux.

The problem with media queries and responsive design at the moment is there's no "real" way to deliver a particular content image (that's referenced in an img tag) for different breakpoints and resolutions.

So, it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images.

All it requires is a blank PNG or GIF the same size as the intended image, and then setting that image's background to whatever image needs to be served along with background-size: contain.

It works because the spacer PNG is transparent, which allows the image's background image to be visible. Because the background is set with CSS, it can then be changed with media queries as required to serve different images to different viewport sizes or resolutions.

And yes, it even works with serving "retina images" to the new iPad.

* As @mkkov pointed out, you could also convert the spacer PNG to base64 to reduce the extra HTTP request.

Pros

Cons

^ You could use jQuery to create a zero opacity clone of the image with the correct src & then wrap them in a span to allow for sharing and saving. See the last demo.

Check out…