Getting started with WebP on Ubuntu

sudo apt update
sudo apt install webp
cwebp -q 100 sample_image.png -o sample_image.webp
# convert all jpeg files in a folder
for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

# Convert all files in a directory
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

using the <picture> tag


<img src="flower.jpg" alt="" />


<!-- order of listing matters in source tag. top will be tried first -->
  <source type="image/webp" srcset="flower.webp" />
  <source type="image/jpeg" srcset="flower.jpg" />
  <!-- img tag should always be included, and it should always be last -->
  <img src="flower.jpg" alt="" />

key takeaways

  • i can automate the process of generating webp version whenever a new image file is uploaded
  • i can serve the images using mod_rewrite, and take care of it on a server level. No need to add <picture> elements inside existing code
  • going through the sample gallery, PNG files seem to look better after converted to WEBP
  • WebP offers both lossless and lossy compression. In lossless compression no data is lost. Lossy compression reduces file size, but at the expense of possibly reducing image quality.
  • you can use imagemin-webp as an npm package and integrate it into your bundler (Webpack, Grunt etc.)
  • In <picture>, the browser uses the first listed source that's in a format it supports. If the browser does not support any of the formats listed in the <source> tags, it falls back to loading the image specified by the <img> tag.


Please note that this site and the posts on it are, and will always be, a work in progress. If i waited for perfection, i’d never get anything done.