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
Before:
<img src="flower.jpg" alt="" />
After:
<!-- order of listing matters in source tag. top will be tried first -->
<picture>
<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="" />
</picture>
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.