web性能-图片优化

基本优化

加快请求

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

减少请求

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

延迟请求

1. 图片的懒加载

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

   <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>
      

图片类型优化

目的：用更高效的格式webp

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

1. WebP优化的最好，同样图片效果，WebP体积最小，但需要做兼容（有些浏览器不支持）

   1. 可以结合使用<picture>元素与<source>元素的type属性，为不支持WebP的浏览器指定已有的图像类型回退

      <picture>
        <source srcset='img/xx-small.webp' type="image/webp">
        <img src="img/xx-small.jpg">
      </picture>
       

   2. 不支持<picture> 标签的话，需要polyfill

   3. 有损WebP版本代替JPEG，无损WebP版本代替PNG。

2. webp 有插件 如：webp-webpack-plugin

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

响应式图像优化

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

背景举例：

• 比如 1920x1080的图片，在pc端展示ok，但响应到移动端之后（假设移动端是750x1334），此时就需要缩放图像，宽度成750。 如果能在响应成移动端时，直接把图片也换成成宽度750的，就会更高效（用控制台的performance可以测试，响应时间和渲染时间都会更短）

具体操作：

1. css：媒体查询：background-image: url("../img/xxx-small.png(或svg)")

2. 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: 704ox) 50vw, 
                     (min-width: 480px) 75vw, 
                     100vw" >
       

---

未来可能持续完善，有疑问和错误可以留言，如果有用，谢谢点赞~

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