图片加载优化

压缩png图片:使用node-pngquant-native工具压缩

压缩jpg图片: 使用jpegtran工具压缩 npm install -g jpegtran

使用方式: jpegtran -copy none -optimize -outfile

压缩gif图片: 使用Gifsicle工具

图片尺寸随网络环境变化 不同环境下(wifi/4g/3g),加载不同尺寸和像素的图片,通过在图片url后缀加不同参数改变

响应式图片 1 javascript绑定事件检测窗口的大小 2 css媒体查询 3 img标签属性实现 <img srcset=“img-320w.jpg,img-640w.jpg 2x,img-960w.jpg 3x” src= “img-960w.jpg” alt=“img”> (x描述符: 表示图像的设备像素比)

逐步加载图像 1 使用lqip 安装npm install lqip 低质量图像占位符 2 使用 sqip 安装 npm install sqip 基于svg的图像占位符

替代图片方式 1 web font 代替图片 2 使用data url(base64)代替图片 3 采用 image spriting (雪碧图)