Web Image Optimisation: Webp & Webm 🦸‍♂️

Illustration by unDraw

While there are a number of techniques out there for optimising images for the web, in this article I will be showing you how to optimise for speed by cutting down the size of image files. Specifically, I will be guiding you through converting your png/jpeg/gif files to a couple of new file extensions that were built for the web. Then we will be adding a fallback to our converted files as the support of these extensions does not cover all browsers yet.

This article is divided into two sections and for each of them we will be going through the 3-step process of installing a library, converting and adding the new files to our project:

1. Webp for png/jpeg files
2. Webm for gif files

Because when it comes to web, size matters!

Webp

Webp is an image format created by Google Developers in order to allow for faster browsing on the web while reducing the image file size by offering lossless and…