Return to Firewoiks

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

Responsive & Retina Content Images Redux using Media Queries & a base64 spacer GIF

Posted: April 25 2012

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.

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

All it requires is a blank 1x1 GIF (converted to base64), and then setting that image's background to whatever image needs to be served along with background-size: contain.

It works because the spacer GIF 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.

Since the GIF's actual size is 1x1, we now 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, reset the padding and height and set a max-height so the images don't continue to create unnecessary padding.

To determine the exact viewport value needed to reset the image's padding, you can include Izilla Media Query Debugger in your page.



Check out…