While responsive web design has taken off like a rocket, the question of what to do with images in a design that adapts to any device that might be used to display it is still under investigation. I’ve gathered some resources to help you understand the issues and see some of the tests and demos that have be done.
I don’t think we have a final answer that will become “best practice” yet, but there are a lot of great minds grappling with the issues.
Posts and Tips
- Responsive Web Design: Preserving “image” aspect ratio
- Adaptive Images in Responsive Web Design
- Responsive Web Images: What can we Expect Next?
- A Framework for Discussing Responsive Image Solutions
- Which Responsive Image Solution Should You Use?
- Source Shuffling: Responsive Images Based on Media Queries
- Responsive Images: What’s the Problem and How Do We Fix it?
- Tips and Tricks for Retina Images in Responsive Web Design
- Mo PIxels Mo’ Problems’
- Responsive Web Design: Fluid Images
- Fluid Images
- Responsive Images Right Now
Helpful Tools
W3C Involvement
I’d like to add my newly beta-released tool “squeezr” to the above list of helpful tools. It’s basically just another take on server side responsive images using cookies, acting pretty much the same as the above mentioned Adaptive Images, but trying to overcome some issues the original AI has. Besides image treatment squeezr also does some sort of server side CSS3 media query evaluation, potentially reducing filesize for less capable devices. Please visit http://squeezr.it or https://github.com/jkphl/squeezr for further details. Any feedback is highly appreciated!