How To Create A Webp Image using cwebp

If you are creating a website, PageSpeed 🏎️ is of utmost importance. Webp is a highly optimized image format. It is supported by all modern browsers which can be confirmed on caniuse/webp. So don't fret, just convert your images to webp.

To convert any image to webp you can use cwebp. This program is available on all Linux based operating systems. This is the command to use cwebp:

cwebp -q 80 image.jpg -o image.webp

However, this is far to cumbersome! 😩 Who wants to type the file name twice! 😵 Add this alias to your terminal so you only have to type webp image.jpg

webp() {
    local filename="${1%.*}"
    local quality=${2:-80}
    cwebp -quiet -q $quality "$1" -o "${filename}-q${quality}.webp"
}

This will create a webp image, set the quality to 80, use the same name for the file, and set the extension to webp. Done!

The header image for this article was 12kb as a jpg and 2kb in webp. It is an impressive optimization and the quality is almost identical to the original.

Happy optimizing. 😎