BBC News: Responsive Images

Slide 1

Slide 1 text

BBC News Responsive Images

Slide 2

Slide 2 text

Context

Slide 3

Slide 3 text

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**

Slide 4

Slide 4 text

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”

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Responsive Images

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

★ 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)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Questions? Contact me on twitter @integralist http://www.integralist.co.uk/