Time to read: about 2 minutes.
I first launched this website in 1996. Since then, it has been re-incarnated using many different technologies. Presently I use Jekyll to assemble the site, then push the image to a web-enabled AWS S3 bucket that is edge-cached by an AWS CloudFront distribution.
Until yesterday, the site contained images with a mixture of image formats. I decided to convert them all to the new
webp format. Because there are hundreds of images in over 120 web pages, I wrote a bash script called
toWebP to do the work. This posting provides the
toWebP script plus instructions on how you could use it for your website.
The script converts image types
tiff. It also modifies the HTML pages, CSS and SCSS that reference those images.
The conversions are set for maximum fidelity (lossless where possible), and maximum compression. This means the images look great and load quickly.
The script assumes that all images are local to your website, which makes sense because the converted images need to be stored, and local storage is the only sensible option. It renames all references to images in HTML, CSS and SCSS files to
webp format. If the images are remote (for example, on a CDN), they are not converted, but the image file types in the HTML, CSS and SCSS are adjusted anyway. I suppose I could fix the script, but I don't need to do that for myself. If someone needs that feature, go ahead and enhance the script... and please provide me the enhanced script, so I can update this blog posting.
You need to install the WebP package.
Ubuntu (this is the default Linux distribution for Windows Subsystem for Linux)
At a shell prompt type:
$ yes | sudo apt install webp
The program may emit warnings when it runs. Those warnings can be safely ignored.
Hopefully, your website is managed by git. I suggest that you commit your work before running the script. That way if something goes wrong you just have to type
git stash to return your website to its previous state.
The general form of the command to convert all images and modify the HTML pages that they are referenced from is:
$ toWebp <directoryName>
To convert the website (images, html, scss & css) rooted at the current directory, type:
$ toWebp .
To convert the website called
mySite rooted under your home directory, type:
$ toWebp ~/mySite
To just convert 1 specific image to
$ toWebp images/blah.jpg
Gist Containing the
toWebP Bash Script.
Put this file in one of the directories on your
PATH, for example
Make it Executable
Remember to make the
toWebp script executable before trying to use it:
$ chmod a+x /usr/local/bin/toWebp