WebP is Google’s new image technology, it can make the web map file effectively compressed, and does not affect the compatibility of picture format and actual clarity, so that the overall web download speed up.

When viewing the performance optimization, the browser suggests that you compress the image and use the WebP format. Then I looked up the relevant documents. Make a note of the holes you step in.

The usage is the same as using PNG/JPG etc. You need to convert the image to WebP format. The best way, of course, is to transcode locally.

Method 1: Use the CwebP command line tool

Convert a single file using cWebP’s default compression Settings:

cwebp images/flower.jpg -o images/flower.webp
Copy the code

Convert a single file using a quality level 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp
Copy the code

Convert all files in a directory:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Copy the code

Method two: Use the Imagemin package

npm install imagemin npm install imagemin-webp

const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp'); (async () => { await imagemin(['images/*.{jpg,png}'], { destination: 'build/images', plugins: [ imageminWebp({quality: 50]}})); console.log('Images optimized'); }) ();Copy the code

Note: those of us who often use NPM packages will immediately use method 2, which will either report missing content or print successfully but without the correct file output. Use method two is also must install webP tools.

Webp tool installation

I use the Mac command

Install Hombrew

Terminal operation

brew install webp
Copy the code

My own one always fails to install by mistake

Error: The following directories are not writable by your user:
/usr/local/share/man/man5
/usr/local/share/man/man7
Copy the code

The solution is to run the command and change ownership

sudo chown -R $(whoami) /usr/local/share/man/man5 /usr/local/share/man/man7
Copy the code

Methods 1 and 2 will only work once webP is installed

Webp compatibility pure in certain issues currently tested on Chrome and Firefox is no problem, Safari 14. It’s still not supported

Reference:

Web. Dev/serve – image… Github.com/imagemin/im…