BBC News: Responsive Images

Bd49b3a98b8125c21c10b43ac77b85e0?s=47 Mark McDonnell
September 11, 2013

BBC News: Responsive Images

These are the slides to my talk at the W3C Responsive Images Community Group meet-up which included participants from Google, Apple, Microsoft, Adobe, Opera, W3C and Akamai (event hosted by Mozilla)

Bd49b3a98b8125c21c10b43ac77b85e0?s=128

Mark McDonnell

September 11, 2013
Tweet

Transcript

  1. BBC News Responsive Images

  2. Context

  3. Scale Last month the BBC News homepage received just over

    83 million views. That's ~2.6 million views per day That’s somewhere in the region of ~57.2 million requests**
  4. Experiences ★ Core (Mobile: 15 HTTP requests, 55k total download)

    ◦ Lightweight ◦ Fast ◦ Works on everything ★ Enhanced (Mobile: 52 HTTP requests, 270k total download) ◦ Bootstraps async JS application ◦ Enhances existing components ◦ Effectively a form of “Progressive Enhancement”
  5. Enhanced Experience ★ 'Enhanced' is for JS enabled devices which

    also pass our "Cutting the Mustard" test. ★ "Cutting The Mustard" `querySelector`, `localStorage`, `addEventListener` ★ “Spreading The Marmalade” Internet Explorer 8 isn’t going anywhere
  6. ImageChef ★ RESTful service dynamically serves up images based on

    specific recipes written in json (e.g. ichef.bbc.co.uk/320/horse.jpg) ★ Sits between website and static image server ★ Creates new image based off the original ★ CDN’ed & heavily cached
  7. Responsive Images

  8. What do we have? ★ We implement a form of

    responsive images using JavaScript (been in use since 2011) ★ Doesn’t follow any of the proposals ★ Serves the needs of the BBC ★ Not a silver bullet
  9. What about polyfills? ★ We don't use either the `srcset`

    or Picture element polyfills ★ `srcset` polyfills can result in downloading multiple image variations all at once ★ Picture element polyfills suffer from considerable markup bloat
  10. ★ Placeholder element + `data-src` & `data-width` attributes ★ JS

    replaces placeholders with transparent 1x1 image with width set to `data-width` ★ We use `max-width: 100%` to ensure our images resize as the browser window gets smaller (this effects rendering of the image) How does it work? (part 1)
  11. How does it work? (part 2) ★ Check `clientWidth` of

    image to determine its actual rendered width ★ JS application checks the screen dimensions and replaces temp image with more appropriately sized image ★ Monitor resize event and rinse/repeat
  12. Open-Source! ★ It's open-sourced on GitHub (the JS that is)

    ★ Automated process using Grunt ◦ No SOA/RESTful architecture? ◦ Just specify an image folder! https://github.com/BBC-News/Imager.js
  13. Questions? Contact me on twitter @integralist http://www.integralist.co.uk/