"Legacy" image formats like jpg and png are often 2-3x larger than "next-gen" image formats like webp. In this video, we'll see how to convert our images using the cwebp utility, as well as how to use the <picture> HTML element to set fallbacks, for browsers that don't support the webp format.
Installation instructions:
- For MacOS, you can use homebrew:
brew install webp - For Windows and Linux, you'll need to download the appropriate precompiled utility from their downloads page
Run:
cwebp -q 70 cat.jpg -o cat.webp
HTML: with jpg fallback
<picture> <source srcset="cat.webp" type="image/webp" /> <img src="cat.jpg" class="cat-photo" alt="A cat hunting a toy bird" /> </picture> <picture> <source srcset="me.webp" type="image/webp" /> <img src="me.png" class="me" alt="3D Josh" /> </picture>