Resize all pictures in a folder and create animated WebP in Linux Bash with webp

2020-11-16

Finally I found the holy grail. How dumb I have been trying to convert JPGs to WebM in my previous post Resize all pictures in a folder and create WebM video in Linux Bash with ffmpeg. Obviously the best solution is to convert the JPGs not to WebM, which is a video format and is not as easy to embed with Hugo, but to WebP. So here is the step-by-step guide how to resize all pictures in a folder and create animated WebP in Linux Bash with webp:

  1. Install webp

    sudo apt install imagemagick
    sudo apt install webp
    
  2. Resize all JPG images starting with PXL in a originals folder to 30% of its original size to downscaled folder (same as in my previous article):

    cd ~/downloads
    convert originals/PXL*.jpg -resize 30% downscaled/PXL.jpg
    
  3. Create a WebP of all JPG images

    cd ~/downscaled
    img2webp -loop 0 -lossy -min_size -d 1000 *.* -o ~/downloads/wooden-house-construction.webp
    

After replacing the GIF with WebP in one of my previous articles about a small wooden house construction with my sons for the forest dwarfs and checking the page speed with Google Lighthouse the speed score is much better than with the original GIF. Now with WebP the page gets:

CategoryScore
Performance97
Accessibility94
Best Practices93
SEO100

Sources

  1. A new image format for the Web
EnglishProfessionalLinuxDebianBashImageProcessing

↩︎ Honza Vojtko, Vztahy a mýty - Párová terapie do kapsy; audiokniha, její poslouchání a co jsem si odnesl

↩︎ Resize all pictures in a folder and create WebM video in Linux Bash with ffmpeg