精选留言(11)

• 

  ！function(){}

  总结图片优化：怎样让图片加载得更快
  一.图片压缩
     1.压缩png
           1)node-pngquant-native
           2)跨平台，压缩比高，压缩png24非常好
     2.压缩jpg
          1)jpegtran
          2)图片尺寸随着网络环境变化
  二.不同网络环境下，加载不同的图片
  三.响应式图片
        1.javascript 绑定时间检测窗口大小
        2.css媒体查询
           @media screen and (max-width:640px){ my_image{width:640px;}​​}
        3.img标签属性
        <img srcset="img-320w.jpg,img-640w.jpg 2x,img-960w.jpg 3x"scr="img-960w.jpg" alt="img" >​
  三.逐步加载图像
       1.使用同一占位符
       2.使用LQIP
       3.使用SQIP
  四.真的图片吗？
       1.web font 代替图片
       2.使用data URI代替图片
       3 .采用Image spriting （雪碧图） 请求数就只有一个

  2019-11-27

  

   6
• 

  淡烟疏雨

  图片环境随网络环境变化具体是怎么实现得呀？

  2019-11-27

   1

   4
• 

  雷霹雳的爸爸

  老师有个口头禅…对…

  作者回复: 被您发现了 :)

  2019-12-11

  

   1
• 

  TAO

  jdf-png-native包支持的不是太好，会有'Can\'t load the addon. Issue to: ' + bugUrl的错误

  2019-11-29

   1

   1
• 

  你若盛开 清风自来

  node-pngquant-native 安装不成功，无法压缩，老师能不能把配置环境讲详细一点

  2019-12-30

  

  
• 

  拖鞋

  老师 雪碧图的方式 是不是不太适应http2.0了

  作者回复: 您说的非常对，HTTP/2支持多路复用，允许通过一个HTTP/2连接发起多个请求，所以说呢优化也是相对而言的。另外呢，HTTP/2相关知识点我们会在第5章服务端和⽹络优化具体讲解。

  2019-12-11

  

  
• 

  得闲饮茶

  node-pngquant-native 这个也没法install 下来··

  作者回复: 您好 node-pngquant-native可能不支持您的node版本，请尝试在低版本node上安装，或者使用已对node-pngquant-native编译好的jdf-png-native模块。

  2019-12-11

  

  
• 

  Robbie

  有没有图片逐步加载代码的demo，怎么就知道图片加载好了，然后隐去低质量图片，将高质量图片渲染

  2019-11-30

   1

  
• 

  萃萃🇨🇳

  看到lqip取base64的图片，我突然想到了一个场景，不知道可不可以用，图片后面有一个虚化的背景图片，以前有用过css滤镜实现，不知道老师说的Lqip用在这种场景是否可行？

  2019-11-27

   1

  
• 

  simple🇻

  老师您好，什么场景下比较适合使用iqip/sqip这种方式

  2019-11-27

   1

  
• 

  我叫徐小晋

  老师您好，怎么判断使用这个逐步加载图片。就是怎么判断图片加载完了？

  2019-11-27

   2

  