[HTML 5 Performance] Optimize Cross-browser Images with webp and the 'picture' Element

"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>