web性能-图片优化

基本优化

加快请求

利用CDN（一次加载，长效缓存，静态资源都可以放cdn）
图片压缩
1. 在线网站 TinyPNG
2. image-webpack-loader（会导致webpack打包时间变长）

减少请求

http/1.x的话，为了减少请求可以用雪碧图。http2可以不用雪碧图，对缓存不友好
小图标尽量用字体图标（也类似雪碧图，把所有的图标以文件的格式，一次性返回）

延迟请求

图片的懒加载

（懒加载的库很多，选择一个最小的 lazyestload.js ，压缩后0.4kb左右，能满足基本需求）

原理是用了 IntersectionObserver （当dom元素与视口交叉的时，触发事件）

<img class="lazyestload" 
     src="images/placeholder/sunset.jpg" 
     data-srcset="images/sunset-400.jpg 400w, images/sunset.jpg 1600w" >

还可以通过使用标签的解决方案，为关闭了JavaScript的用户做打算。

<picture>
    <source data-srcset="img/chicken-marsala-2x.webp 2x, img/chicken-marsala-1x.webp 1x" type="image/webp">
    <source data-srcset="img/chicken-marsala-2x.jpg 2x, img/chicken-marsala-1x.jpg 1x" type="image/jpeg">
    <img src="img/blank.png" data-src="img/chicken-marsala-1x.jpg" class="recipeImage lazy">
</picture>
      
关闭了js的用户，就没有懒加载功能，只能直接加载图像了
<noscript>
    <picture>
        <source srcset="img/chicken-marsala-2x.webp 2x, img/chicken-marsala-1x.webp 1x" type="image/webp">
        <source srcset="img/chicken-marsala-2x.jpg 2x, img/chicken-marsala-1x.jpg 1x" type="image/jpeg">
        <img src="img/chicken-marsala-1x.jpg" class="recipeImage">
    </picture>
</noscript>

另外还推荐一个开源库：lozad.js，www.npmjs.com/package/loz…

用起来还不错，体积也不大，gzip后 1kb+
功能比上面的更全，除了<img 外， video 等也能支持

最后，要上手的话，建议先最小单元模块测试跑通三方库的使用，在用到项目内去。

图片类型优化

目的：用更高效的格式webp

在线转换webp www.upyun.com/webp

矢量图：svg（是计算出来的，缩放不失真）

位图：JPEG，PNG，GIF，WebP（像素级）

WebP优化的最好。同样图片效果，WebP体积最小。

但需要注意3个使用问题：

WebP如何做兼容？

可以结合使用<picture>元素与<source>元素的type属性，为不支持WebP的浏览器指定已有的图像类型回退
```
<picture>
  <source srcset='img/xx-small.webp' type="image/webp">
  <img src="img/xx-small.jpg">
</picture>
```
<picture>标签的兼容性
- 不支持<picture> 标签的话，需要polyfill
  1. 有损WebP版本代替JPEG，无损WebP版本代替PNG。

另外还可以用js的方法来兼容

可以结合图片懒加载组件，一起写。可能会比上面的更简单

/**
 *  判断当前浏览器是否支持webp
 */
let bool: boolean
export function isSupportWebp() {
  if (bool !== undefined) {
    return bool
  } else {
    try {
      // Boolean([].map) 主要是判断浏览器是否为 IE9+ ，以免 toDataURL 方法会挂掉；
      // 如果你直接对数组原型扩展了 map 方法，则需要使用 !![].map 以外的方法进行判断 ，例如  !!window.addEventListener 等；
      bool =
        Boolean([].map) &&
        document
          ?.createElement('canvas')
          ?.toDataURL('image/webp')
          ?.startsWith('data:image/webp')
      return bool
    } catch (err) {
      return false
    }
  }
}

2022.7.18补充，上面的方法，在safari上会失效（safari能支持webp，上面也会返回false），推荐用：

let support = true
export function isSupportWebp() {
  if (typeof window === 'undefined') {
    // 服务端, 默认用webp
    return true
  }
  if (support !== undefined) {
    return support
  }
  try {
    const el = document.createElement('object')
    el.type = 'image/webp'
    el.style.visibility = 'hidden'
    el.innerHTML = '!'
    document.body.appendChild(el)
    support = !el.offsetWidth
    document.body.removeChild(el)
  } catch (err) {
    support = false
  }

  return support
}

webpack如何解析 webp格式的资源？

2c 场景我们加载图片一般是用CDN。但一些内部项目想尝试webpack解析webp的话：

使用 file-loader（实际就是处理资源引入的path）
```
...
{
  test: /\.(webp)$/i,
  loader: 'file-loader'
},
...
```
webp格式压缩效果

公司内部没有基建的话，开源的有：webp压缩网站：www.upyun.com/webp tinypng压缩图片：tinypng.com/

个人亲测了2张图片

体积大小图片效果
原图 98.9kb 原图
webp 57.6kb 细节略微一点点模糊
tinypng 87.0kb 几乎无损

体积大小图片效果
原图 262.5kb 原图
webp 24.8kb 细节略微一点点模糊
tinypng 52.7kb 几乎无损

	体积大小	图片效果
原图	98.9kb	原图
webp	57.6kb	细节略微一点点模糊
tinypng	87.0kb	几乎无损

	体积大小	图片效果
原图	262.5kb	原图
webp	24.8kb	细节略微一点点模糊
tinypng	52.7kb	几乎无损

总结：webp的对图片的压缩效率非常高，画质接近几乎无损，十分建议使用

响应式图像优化

（为不同的尺寸，准备不同的图片大小）

背景举例：

同样一张图。pc端是大图1Mb，移动端只需300kb的小图就够了
- 比如 1920x1080的图片，在pc端展示ok，但响应到移动端之后（假设移动端是750x1334），此时就需要缩放图像，宽度成750。如果能在响应成移动端时，直接把图片也换成成宽度750的，文件也会更小，更高效（用控制台的performance可以测试，响应时间和渲染时间都会更短）

具体操作：

css：媒体查询：background-image: url("../img/xxx-small.png(或svg)")
html：<picture>元素和<img>标签的srcset属性，不兼容的话还需polyfill
1. 对图片需设置一个通用的配置:
  1. img { max-width: 100%; } （好处：使图片都渲染成为自然宽度。除非超过容器宽度，超过时，会限制图片最大宽度是容器宽度）
2. srcset（html5 出的显示响应式图像）（效果类似媒体查询）
```
   <img src='img-small.jpg' 
        srcset="img-medium.jpg 640w, 
                img-large.jpg 1280w">
   如果不支持srcset，则直接读取 src，此处默认移动优先
```
3. sizes可以更细的控制图片的宽度：比如在宽屏时图片占一半宽度50vw
```
   <img src='img-small.jpg' 
        srcset="img-medium.jpg 640w, 
                img-large.jpg 1280w"
        sizes="(min-width: 704px) 50vw, 
               (min-width: 480px) 75vw, 
               100vw" >
```

渐进式图片

效果（渐进式图片的体验要好一些）：

一般线性加载：

交错/渐进式：

如何得到渐进式图片：

在线转换工具：coding.tools/cn/progress…
或者 ps导出：www.cnblogs.com/CyLee/p/112…
或者 webpack打包时转换（只需打包一次手动替换。每次都打包的话，会增加打包时间，而且重复压缩和转化了）：www.npmjs.com/package/ima…

gif动图优化

gif图片不处理的话，体积会比较大。

常见的gif优化有2点：

gif抽帧
- gif 1秒有24帧（24张图片），我们可以尝试抽成 8帧、12帧或16帧，具体还看场景
压缩
- 本质也是压缩图片，可以转成webp格式

码字不易，点赞鼓励！

部分参考《Web性能实战》[美]杰里米·瓦格纳

性能优化合集快速入口：