Serving WebP on S3

Part of why I built this site is so I can share the moments everytime
I go and shoot sunrise. I want people,
especially my family and friends, to see how beautiful the world is
and so that they too can enjoy what I've seen that morning or evening
(if it's a sunset shoot).

Recently, my other half complainedtold me that she's unable to
view my pics because her internet is too slow. For me this was just
unacceptable because I want her to see my photos too, especially since
we're in an LDR. And since I thought the images are already small and
have already exhausted all the image optimization techniques I could
think of, where else do I go from here?

Enter WebP.

Playing around with WebP and figuring out how much savings I'd get by
serving WebP images in addition to JPG, the space and time savings I
saw was just fantastic from an optimization perspective. Some of the
images even compress to as much as 50% from the original JPG. Multiply
those savings to the number of photos I have now and in the future,
that's a huge win in terms of page load time and web hosting cost. So
it definitely convinced me that I really need to serve WebP alongside
JPG. But how? AWS S3/Cloudfront is great but
it doesn't support Content Negotiation if your site is being served
from an S3 bucket such as this one. I surely don't want a backend
server because that defeats having a cost-effective site in the first
place.

Enter the <picture> element.

The <picture> element is a new HTML5 element created to
support responsive images on the web and is also great for art
direction. It allows you to use the powerful
img srcset in a very flexible
way. But another benefit and advantage of the picture element is its
availability to serve different types of image formats according to
your needs via the <source> type attribute . Since it's
basically markup, all you need to do is to add type="image/webp" to the
<source> element and the browser takes care of serving the
necessary image type as per the image types the browser supports. No
need to launch a backend server instance just so you can serve
WebP.

Since <picture> is still new, I suggest that you use a
polyfill such as
picturefill so you can use
the <picture> element today!