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
   

   View Slide

2. Context
   

   View Slide

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

   View Slide

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”
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. Responsive Images
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide