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)

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/