Responsive & Retina Content Images using simple CSS & a spacer PNG - HTML5/CSS3 Experiment - Firewoiks: Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3

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

All users, regardless of device width/resolution/whatever get the image that's targeted for them with minimal overhead.
Requires no additional markup - just the img tag
Works with existing technologies and markup.
No dependencies on JavaScript or other polyfills^
Images will still retain any accessibility features from the alt text
Replacement images can easily be targeted with the [src] attribute selector if a consistent naming convention is used

Cons

An extra HTTP request to first load the spacer PNG
A unique PNG is required for every different dimension of content image that needs to be made responsive
Replacement images defined in CSS, not in markup or on the image itself
Users cannot pin, share or save the image easily^

^ 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.

Return to Firewoiks