Webp image conversion on mac

June 29, 2020

Recently in my crusade to get a 100 on Lighthouse on a recent project I wanted to test converting all of my images to a “next gen format”. To do this, I used Google’s webp conversion tool via homebrew.

Once you have homebrew installed, install webp using:

brew install webp

Now you can convert a single image using:

cwebp example.png -o example.webp

For a batch of images, that would get a bit tedious. To solve, I installed Parallel via homebrew.

brew install parallel

Once parallel and webp are installed you can navigate to your directory of choice and run:

find . -name "*.png" | parallel -eta cwebp {} -o {.}.webp

This of course only searches for images with a png extension. Webp has support to convert jpg, png and tiff files, so just adjust the extension accordingly.

According to caniuse.com, webp is supported by most major browsers. Given most of my projects still require some support for IE11, you’ll need to use the picture element with a fallback to a supported image format. In the code below, that fallback is set to a png file.

Can i use details on the webp image format

  <source srcset="img/example.webp 1x, img/2x/example.webp 2x" type="image/webp">
  <source srcset="img/example.png 1x, img/2x/example.png 2x" type="image/png">
    src="img/example.png" alt="example image alt text">


#Webp #Optimization