web性能-图片优化

我心飞翔 分类:javascript

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性能实战》[美]杰里米·瓦格纳

回复

我来回复
  • 暂无回复内容