How does vue convert pictures to webp and display them on the front end

1. First convert the image to webp format

1.1 After you can enter cmd, pip installs pillow

pip install  Pillow --trusted-host mirrors.cloud.tencent.com

1.2 save in webp format, you can get webp format pictures

...
from PIL import Image
img = Image.open('background1.jpeg').convert('RGB')
img.save('background3.jpeg.webp', 'webp')

2. Front-end display:

2.1 Vue-cli reads webp files and needs to add a file-loader item in the webpage configuration file

My configuration file is webpack.base.conf.js in the build directory

    rules: [  
    ......
      {
        test: /\.webp$/i,
        use:['file-loader']
      },
    ......
    ]

2.2 <img> tag cannot src to webp file, need to use <div>+background-image

          <div id="imgMain1"
          :style="{ height: Height + 'px' }"
          style="width:100%;"></div>  

  background-image: url('../../assets/background1jpeg.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%

It should be noted that for the div of the background-image, the height of the element should be specified

Because  background-imageit is a background image, it is a style of css and does not occupy space. The background image of the element fills the size of the element, which is passive padding. If the element size is not specified, it defaults to 0; it is a block element, which is an image
<img />. It is a tag of html, occupying space, and the size of the image determines the size of the element, which belongs to active padding, so sometimes img does not need to specify the height and width.

Therefore, for the outer div box, the height must be specified, otherwise the div will not be able to support it and will become an element with a height of 0

In addition, sometimes the webp image is larger than the jpeg format, it is better not to convert it to take up less space

See https://www.cnblogs.com/Pickcle/p/6247740.html