Use data URI for the webmaker logo.

As part of the snippet guidelines all images must be in the form of data
URIs. This commit replaces the external src with a data URI src in the
snippet HTML. I've also created a `make` task for generating a data URI
for the logo image.

We are using a PNG asset currently (~150x150), which isn't ideal. I
found an EPS version and got someone with Illustrator to export it as an
SVG, but that didn't end up working so well: either because of the
original file, or the specific version of Illustrator that was used, the
SVG ended up containing a *lot* of bitmap data and was over 3 times as
big as the original PNG.
Replace logo with smaller version.

I researched PNG compression and found [a site that optimizes PNGs
really well][1] based on two great tools, [ImageOptim] and
[ImageAlpha]. ImageAlpha can create an 8-bit PNG with multiple alpha
channels, which Photoshop can't do yet, and ImageOptim runs it through a
pipeline of some of the best PNG compression tools to reduce the size
even further.

After running the original PNG through the 8bitalpha tool, the file size
went from 22,170 bytes to 6,403 bytes. I messed around with ImageAlpha &
ImageOptim manually, but I couldn't do much better without degrading the
image quality.

I've also changed the `make` task for generating the data URI so it
A) doesn't try to save the surrounding <img /> tag and B) prints the
data URI to stdout so it can be pipelined with `pbcopy`.

[1]: http://www.8bitalpha.com/
[ImageOptim]: https://imageoptim.com/
[ImageAlpha]: http://pngmini.com/