Create WebP variations for all images on larger sites

[eelkenet]

After enabling WebP support you may notice it can take a long time for ProcessWire to create WebP copies of all images and their variations.
For instance, on a site I work on (with over 10k images), it was taking about 1 second per image, ie. more than 3 hours in total.. ?

If you are comfortable around the command-line, you can use the cwebp program and this bash script to speed things up drastically.
I have built upon this script and got things to work in combination with xargs and find, making it rather powerful for PW's purposes.

1. Save this script as 'convert-webp.sh' (or download the Gist from Github), and follow instructions

#########################################################################################################
#
# Fast Recursive Images to WebP converter
# Customized for ProcessWire CMS/CMF <https://www.processwire.com>
#
# Author: Eelke Feenstra <dev@eelke.net>
# Version: 001
# Based upon: https://github.com/onadrog/bash-webp-converter
#
# Quick & dirty script to add webp versions to all PNG / JPG / JPEG files inside your PW assets folder
#
# 1. Set this script to executable:
#       $ chmod +x convert-webp.sh
#
# 2. Check if cwebp is installed:
#       $ cwebp -version
#    If it is not, install:
#       $ brew install webp
#    Or follow instructions https://developers.google.com/speed/webp/download
#    and change $executable to cwebp's full path
#
# 3. Run the script directly on a folder:
#       $ ./convert-webp.sh /path/to/your/folder
#
#########################################################################################################

#    Configuration

executable="cwebp"    # update this to reflect your installation!
quality=90            # change to desired WebP quality

#########################################################################################################

converted=0
skipped=0

echo "Entering $1"

for file in $1/*
do
    name="${file%.*}"

    echo "FILE: $file"
    echo "NAME: $name"

    # Skip the folder itself..
    if [ "$name" = "./." ]; then
        echo "SKIP: $name"
        continue;
    fi

    if [[ $(file --mime-type -b $name.webp) == image/webp ]]; then

        echo "FOUND: $name.webp, skipping.."
        skipped=$((skipped+1))

    elif [[ $(file --mime-type -b $file) == image/*g ]]; then

        echo "NOT FOUND: $name.webp"

        newfile(){
            echo "$file" | sed -r 's/(\.[a-z0-9]*$)/.webp/'
        }

        $executable -q $quality "$file" -short -o "$(newfile)"
        converted=$((converted+1))
    fi
done

echo "Converted $converted, Skipped $skipped"

2. Run to create webp versions of all jpg/jpeg/png images in a given folder (for example the site's homepage)

$ ./convert-webp.sh /path/to/processwire/site/assets/files/1

3. And in order to create WebP copies of ALL images inside the /site/assets/files folder, you can run this script. It searches for all directories inside the files directory, and passes these to the convert-webp.sh script using xargs.

$ find /path/to/processwire/site/assets/files -maxdepth 2 -type d | xargs -I '{}' ./convert-webp.sh '{}'

 

Tested both on MacOS 12 and Debian