I’ve spoken to a few people on Twitter about this, but 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.

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.

This is a bad idea. Because spacer-images won’t work. Ever thought about accessibility? And at least it’s not the way we want to go. If you want to go the CSS way, you can go with the new spec created for responsive images.
But that’s a no-go for HTML responsive images. Better use the polyfill (div-markup) by Scott.

Yeah, I have thought about accessibility and I don’t see any issues. The image is still an image and will still have alt text to describe it, so I can’t see that it makes any difference that the pixels are empty.

I could be missing something though, so if you have more info on the accessibility issues, I’d like to hear them.

I certainly don’t like the idea of using a placeholder image. An accessible website should always be accessable in plain / raw HTML. If you change things with JS or CSS it’s not a good way to do.
As you can read over there, CSS is styling only. As for JS which adds a dynamic functionality to existing static content (but shouldn’t replace it): http://www.w3.org/community/respimg/2012/04/08/using-css-to-control-image-variants/

It’s a good idea. I’ve heard of the javascript equivalent, but this has some merits.

A couple of points:
– You don’t need separate PNGs of different sizes, just one 1px x 1px transparent PNG for all img tags and then just set the width/height of the div in css
– You can skip the additional http request by using the base64 encoding of the 1px x 1px PNG (though if you have a lot of images this might around a Kb to the page)

Thanks. I previously tried base64, but I obviously did it wrong as it only worked in Firefox. I might update my demo.

As for the generic image, that doesn’t work if you need it to be responsive. As soon as you give the img {height: auto} to allow it to scale, the height of the image will be dependent on the actual physical dimensions of the image. If it’s not the same as the one you’re “replacing it” with then you won’t get the desired effect.

Data-URI (which is more than Base64 encoding) works in all modern browsers since their first version (Firefox, Chrome, Safari and Opera at least), at the exception of IE who support data-URI only from version 8.

Seriously, this is a cool workaround. But, it’s definetly not responsive image as I consider them.

Using this technique covers well blindness accessibility issue and bandwidth issue. But the cost is that you’re completely removing the img tag data.

This will cause issue in the fact that web isn’t only a presentational layer (like CSS), but also a content based media, and that images are part of this content layer. How services like Facebook and Pinterest (to name only them) will retrieve image to present/share pieces of content if content image are now removed from content flow? (Or how normal user would just right click/save images)

I don’t think this is the good way to go, even though this idea is pretty cool at first sight.

While this solution does solve some of the issues of responsive images, to me, the cons outweigh the benefits.

Being able to save, share, pin an image should be a requirement for any responsive image solution. Yes, this solution is accessible in that it still has alt text on an img tag, but the user has no way to interact with the image; Save/Share/Pin. While you may be happy not using Facebook or Pinterest, there are a few people who do use those sites. Facebook currently has around 750 million users, I’m not sure what the numbers are for Pinterest. http://tinyurl.com/7yqgv36