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!

Last Updated: 9/10/2018, 10:28:04 AM