Responsive Content Images using a spacer PNG and background-image
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.
- Users cannot pin, share or save the image easily.
Clever idea. I’m still thinking about it, but is a clever idea.
Do you thought about a scoped style to keep all the info of the image at the HTML file?
Scoped style as in http://html5doctor.com/the-scoped-attribute/ ?
Even if this were a supported feature, each image would also need to be contained in an element for this to work.
I was planning on using my company’s CMS to know which images were “responsive” and generate a relevant styles in the head.
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.
Can you link me to “new spec created for responsive images”?
Thanks
Sorry for not replying to this post in time.
Spec can be found here: http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
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)
It’s easier to see these points in a demo
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.
It’s certainly clever but I’d worry about requiring CSS to define what images show up. It’s a “works today” solution but not the long term solution.
Extending the idea, you could use data-* attributes to define the various src’s, then use JavaScript to create and inject the needed styles.
Thanks Chris. “Works today” is what I’m going for until we have a real picture element or other solution.
It’s simple enough to be able to incorporate in to CMS sites now, where there is limited control of the markup.
I agree. 🙂
The solution is both a throwback to Spacer GIFs from the days of old as well as being easier to use than the other solutions I’ve seen so far.
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.
Yeah, I listed not being able to save or share an image as a problem. Not sure how to resolve that.
One solution is to not use Facebook or Pinterest. I’ve doing that happily for years 🙂
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
Solutions for responsive images need to address users needs, not our own.
In looking at the demos, the user has to download 2 imgs with this solution. http://www.mattstow.com/experiment/responsive-images/responsive-images-real-world.html
For example, if the screen size is 320px or smaller, the 1300×851 spacer.png and the emperor-penguins-320.jpg are downloaded.
Having to download two images for every one visible image negates the benefits of serving small images, especially if the huge spacer image on mobile sized devices is downloaded.
Like I said, the cons of the solution currently outweigh the benefits in my opinion.