Added back in butterfly as part of WebP+picture demo

There are a few use cases for `<picture>` so I added in a second example for file format support. 

Is it okay to have multiple `<!-- // [START code-block] -->` blocks sprinkled throughout the text? Added `<section>` tags with `id` for URL anchor support.
The whole extracting code snippets via comment tags thing isn't implemented yet, but I think that using distinct identifiers for each distinct snippet will end up making the most sense. So `code-block-responsive-sizes` and `code-block-fallback-formats` or something along those lines.