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.

Pros

All users, regardless of device width/resolution/whatever get the image that's targeted for them with minimal overhead
No additional HTTP requests as the img src is a base64 string
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

Cons

Replacement images defined in CSS, not in markup or on the image itself
Users cannot pin, share, save or print the image without using my rwdImages jQuery plugin

Return to Firewoiks