移动端H5页面使用 webp 格式图片

1、为什么用 webp 格式图片

【】webp格式是新起的一种图片格式，由谷歌推出。这种格式的图片支持有损压缩和无损压缩两种压缩模式。它的特点是体积小

【】体积小意味着加载时间更短。客户可以不用过长等待资源的加载，在客户体验感上会比较友好。更重要的是，体积小，同样也意味着更少的宽带流量。可以给企业减少在宽带上的支出

【】iOS 从版本 14 才开始支持 WebP 格式的图片；Android 从版本 4 开始支持 WebP 格式的图片，但是在版本 4.2 之前，不支持 WebP 的无损压缩 lossless、透明度 alpha 和动画 animation 功能

2、判断是否支持 WebP

【】原理：尝试去加载一个 1×1 大小的 WebP 图片，如果加载成功了，并且可以获取到图片的 width 和 height，说明当前浏览器环境支持 WebP，反之不支持

/**
 * @description 判断当前浏览器环境是否支持 WebP 格式
 * @param {string} [feature='lossless'] WebP 功能
 * @return {Promise<boolean>} 描述是否支持 WebP 格式的 Promise 对象
 */

const isSupportWebP = (feature = 'lossless') => {
  const testImages = {
    lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
    lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
    alpha: 'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==',
    animation: 'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA',
  };

  return new Promise(resolve => {
    const _image = new Image();
    _image.onload = () => {
      const result = _image.width > 0 && _image.height > 0;
      resolve(result);
    };
    _image.onerror = () => {
      resolve(false);
    };
    _image.src = `data:image/webp;base64,${testImages[feature]}`;
  });
};

【】应用到 react 中：

import React, { useState, useEffect } from 'react';
import { isSupportWebP } from './utils';

const App = () => {
  const [supportWebP, setSupportWebP] = useState(true);
  useEffect(() => {
    isSupportWebP().then(result => setSupportWebP(result));
  }, []);

  return (
    <div className="app">
      <img
        className="banner"
        src={require(`./images/banner.${supportWebP ? 'webp' : 'png'}`)}
        alt="banner image"
      />
    </div>
  );
};

export default App;