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?
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!