The format is a broadly supported compressed image format that is becoming more and more common across the web. Storing your images as can reduce the size of your web pages, while still maintaining the image quality you need. The image size savings can be pretty significant, meaning your pages will load a lot faster. .webp .webp If you want to convert an image to , you can do it in many apps like Photoshop - but a faster way is to do it right from the terminal. Let's look at how it works. .webp Support for .webp files is broadly supported by all browsers except Internet Explorer. You can see the full support below: .webp Installing WebP and cwebp To start converting files to , the first thing we need to do is install a tool called , which is part of the package provided by Google. This is easy if you have installed, where it can be installed from terminal like this: .webp cwebp webp homebrew brew install webp If you don't, you can find more instructions on . After installing, we can run the command from terminal to get the following output: installing this package via Google cwebp ~ % cwebp Usage: cwebp [options] -q quality input.png -o output.webp So now, if we want to change a file to , with a quality of 60, we can run the following command: .png .webp cwebp -q 60 image.png -o image.webp This will convert to a file called with 60% quality. Changing this quality number will change the size outputted - with a lower quality making smaller files - but balancing it so the image still looks OK is also important. , so we'll have two versions of our file. image.png image.webp The original image will still be kept Since some older browsers like Internet Explorer do not support , having both versions is actually useful. In HTML, we can use our file with a fallback to the original file using the tag: .webp .webp .png <picture> <picture> <source srcset="image.webp" type="image/webp"> <img src="image.png" alt="Image for Article" /> </picture> That means for users on more modern browsers, they'll get the added benefit of faster load times - while those on older browsers will still see the image, if their browser doesn't support . .webp Converting All Your Images To .webp is so fast, it makes sense to make copies of all your images so you have them available should you want to use them. Since maintains the original file too, there's no risk you might lose original copies of images. Since most servers have a lot of images, though, this can be very time consuming. .webp .webp cwebp Fortunately, we can use to convert all of our , and files to using a loop. The below code will find all images within the directory you run it in, and create versions for each. Since it works recursively, it will convert any image found on your server. That means it can sometimes be time consuming to run, depending on how many images you have. . cwebp .png .jpg .jpeg .webp for .webp You can learn more about the find command here echo 'Converting all .png, .jpg, and .jpeg files to .webp...' for f in $(find . -name '*.png' -or -name '*.jpg' -or -name '*.jpeg'); do if [ ! -f "${f%.*}.webp" ]; then cwebp -q 60 $f -o ${f%.*}.webp fi done
