How the BBC handles responsive images

LINK: responsivenews.co.uk ➚ | Posted by: Joshua Benton | May 22, 2013

On BBC News developers’ interesting blog on how they’re integrating responsive design into BBC products, the team has posted about how they handle one of the trickiest issues of responsive design — how to deal with images. How can your web page be smart enough to download big, beautiful images when on a big desktop screen and small, optimized ones for a smartphone?

This is an area where standards are still unsettled and there are a lot of competing best practices. The BBC approach involves hardcoding only the first image on a page in the HTML markup and bringing in others selectively via JavaScript. Also:

As the BBC News site publishes MANY articles everyday, many images are published too. BBC News has an automated process to create 18 different versions of each published image.

Show tags

Joshua Benton

PressPad, an attempt to bring some class diversity to posh British journalism, is shutting down

“While there is even more need for this intervention than when we began the project, the initiative needs more resources than the current team can provide.”

Richard Tofel

Is the Texas Tribune an example or an exception? A conversation with Evan Smith about earned income

“I think risk aversion is the thing that’s killing our business right now.”

Jeff Jarvis

The California Journalism Preservation Act would do more harm than good. Here’s how the state might better help news

“If there are resources to be put to work, we must ask where those resources should come from, who should receive them, and on what basis they should be distributed.”