Responsive Images in a responsive web design?

Wednesday, February 1st, 2012 | Business | by

We’ve been hearing about “responsive web design” and layouts everywhere.  It’s the new “Web 2.0” it seems.

I ran across an article yesterday, Responsive Images: How they Almost Worked and What We Need, by Mat Marquis yesterday.  Mat talks about the various approaches used by the famous Boston Globe website’s responsive design to address the need for multiple sized images.

In a responsive design a single “page” can scale up to a full browser (usually a maximum of 1600px wide) down to a mobile device (128-240px).  It’s a waste to download a 1-2MB image if you only need a tiny 10-20KB image.  On a mobile device there are various types of connection types that limit what a user will wait for.

From the article:

It’s easy enough to style images so that they scale to fit within a parent container by adding img { max-width: 100%; } to one’s stylesheet. To use this effectively, though, the image must be large enough to scale up to whatever size we can reasonably expect on the largest possible display. This can mean a great deal of overhead.

That overhead is very dangerous if someone is using a 2G data connection, or paying a lot of money for their data (even with standard data plans, we pay about $0.01 for every meg we download, international data rates can skyrocket).

The problem is one we all face, we want images (and our sites) to look good no matter what browser / device people are on.  It’s a tough problem given the limitations of the technology we use.  In the past I’ve built Javascript code that looks at the window resolution and applies mathematical functions to re-size the page, or a simple base class to toggle the CSS.  That’s nice, but there are edge cases that make that solution not necessarily optimal.  Mat dives into the details.

The final “Solution” offered requires modification of all web browsers, but makes perfect sense given the video and audio tags.

 

Related Posts

Tags: , , ,

No comments yet.

Leave a comment

*


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template