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)
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**
(Mobile: 15 HTTP requests, 55k total download)
○ Works on everything
(Mobile: 52 HTTP requests, 270k total download)
○ Bootstraps async JS application
○ Enhances existing components
○ Effectively a form of “Progressive Enhancement”
★ '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
★ 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
★ Creates new image based off the original
★ CDN’ed & heavily cached
What do we have?
★ We implement a form of responsive images
★ Doesn’t follow any of the proposals
★ Serves the needs of the BBC
★ Not a silver bullet
What about polyfills?
★ We don't use either the `srcset` or Picture
★ `srcset` polyfills can result in downloading
multiple image variations all at once
★ Picture element polyfills suffer from
considerable markup bloat
★ 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)
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
★ It's open-sourced on GitHub (the JS that is)
★ Automated process using Grunt
○ No SOA/RESTful architecture?
○ Just specify an image folder!
Contact me on twitter @integralist