WebP is an image format based on VP8, it supports lossless and lossy compression. Its very useful to keep image sizes low on asset heavy websites, improving load times.

Wiki: https://en.wikipedia.org/wiki/WebP

Below is a bash script that is meant to be executed on the root of your static directory, it will convert all .jpg, .jpeg and .png image assets to .webp within the same and sub directories.

Cwebp Tool: https://www.npmjs.com/package/cwebp


WebP.sh Download

#!/bin/bash

# JPEG to WebP
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# PNG to WebP
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

Result

8192 git:(master) ✗ ./webp.sh
➜  static git:(master) ✗ tree
.
├── 1024-768-max.jpg
├── 1024-768-max.webp
├── 8192_public_key.asc
├── android_boot
│   ├── 1.jpg
│   ├── 1.webp
│   ├── 2.jpg
│   ├── 2.webp
│   ├── 3.jpg
│   ├── 3.webp
│   ├── arch_linux_add_torrent_screen.png
│   ├── arch_linux_add_torrent_screen.webp
│   ├── Debian_RSS.png
│   ├── Debian_RSS.webp
│   ├── Fdroid_install_loading.png
│   ├── Fdroid_install_loading.webp

Ceanup.

8192 git:(master) ✗ rm *jpg
➜  8192 git:(master) ✗ rm *png

Don’t forget to update your code. :)

How To Create and Serve WebP Images to Speed Up Your Website