1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Optimize Cross-browser Images with webp and the 'picture' Element

    htmlHTML 5

    "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