Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Other Decks in Technology

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/