Why webP images?

WebP is smaller than JPEG and PNG of the same quality and generally reduces file size by 25-35%, which can significantly improve load performance.

  • YouTube has seen a 10 percent increase in page load times since using WebP
  • Facebook has seen a 25% to 35% reduction in JPEG storage and an 80% reduction in PNG storage since adopting WebP

WebP is an excellent alternative to JPEG, PNG, and GIF. And WebP supports both lossless and lossy compression. Lossless compression ensures no loss of quality, while lossy compression can greatly reduce file size, but the corresponding quality will be reduced.

Convert the image to WebP

There are generally two methods: cWebP Command-line tool and Imagemin WebP Plugin. Imagemin plug-ins are used to build tools such as WebPack, gulp, etc. Cwebp is better suited for one-time transformations.

When you convert to WebP, you need to consider the quality of the image. You can choose from 0 to 100, and choose the best quality and size to meet your requirements.

Using cwebp

Convert a file with the default configuration

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

Convert a file with 50 mass

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

Using Imagemin

This plugin can be used according to the build tools of your own product. Here is how webpack is used:

const ImageminWebP = require('imagemin-webp');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js'.output: {
    filename: 'bundle.js'.path: path.resolve(__dirname, 'dist')},plugins: [
    new CopyWebpackPlugin([{
      from: './images/**/**'.to: './images/[name].webp'
    }]),
    new ImageminPlugin({
      // imagemin-webp docs: https://github.com/imagemin/imagemin-webp
      plugins: [ImageminWebP({quality: 50})]]}});Copy the code

If you’re not using a build tool, you can use Nodejs to do this, as shown in the following code, which converts all images from the images directory to webP and places them in the compressed_iamges directory:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'] and {destination: 'compressed_images'.plugins: [imageminWebp({quality: 50})]
}).then((a)= > {
  console.log('Done! ');
});
Copy the code

Use WebP images in HTML

If compatibility is out of the question, look no further. In general, we will display WebP for browsers that support WebP, and JPEG or PNG for those that do not.

Before use:

<img src="flower.jpg" alt="">
Copy the code

After use:

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>
Copy the code

Note the use of these tags ,,
, and their order.

picture

The tag provides a container that holds severaland one
.

source

Thetag defines a media source.

From top to bottom, the browser detects which formats are supported for presentation and, if none is, fallback to the tag.

Use WebP images in CSS

You might want to try this:

#picture {
    background-image: url(picture.webp);
    background-image: url(picture.jpg);
}
Copy the code

CSS is cascading, the latter overwrites the former, does not support WebP as expected, then automatically fallback to JPEG.

The common practice is to check whether WebP support, the relevant test code can be referred to: modernizr.com/download.

If the script detects that it supports webp, it will add a webp class to the HTML tag. If it does not support webp, it will add no-webp to the HTML tag.

.elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}
Copy the code

conclusion

In general projects, we still use as few images as possible, and often use Imagemin or CWebP to do one-time conversion. Only when your project images change frequently and there are a lot of images, will you consider integrating them into the build tool, and also face the problem of CSS fallback. The integration into the build script also requires additional plug-in development, possibly more than one, which we will discuss in a later article.

reference

  • Web. Dev/serve – image…
  • Css-tricks.com/using-webp-…