Use <picture> for homepage cover image

As discussed in issue #3, the cover image on the homepage is currently 5000px wide and 2.2mb in size. This is not ideal.

This introduces the [Picturefill]() js library to polyfill the new `<picture>` element and associated features, allowing us to deliver the most appropriate image for a users device and current viewport. 

As the cover image takes up the entire viewport width, I have opted more the more concise `srcset` & `size` attributes inside an `<img>` element rather than the full blown `<picture>` element.

I have generated four different dimensions of the image for most common screen sizes and ran then through ImageOptim:
- 640
- 1024
- 2048
- 4096

#### Next steps:
- Add to all content images across site, i.e. talk thumbnails etc
- Automate image optimisation and cropping batch processing via a gulp task
- Test in common browsers.

#### Further reading:
- srcset and sizes: http://ericportis.com/posts/2014/srcset-sizes/
- Picture documentation and examples: http://scottjehl.github.io/picturefill/#getting-started
The linter will raise this as unused. I wonder if there's a way to import something but don't assign it to a variable.