图片性能优化笔记--分享记录

图片资源现状

• 优化图片，带来的收益很大

如何确定需要优化

• Audits panel --> chrome 调试器

优化步骤

选择正确的图片格式

位图与矢量图

jpeg 格式(有损压缩)

• 压缩质量 --> 质量 100 -> 50 大小缩放极大，之后很小，50 质量和 100 感官差不多
• 压缩模式 --> baseline 和 Progressive, Progressive 大小在 10k 以上会比 baseline 缩小 2%-10%,10k 以下则会大, 不会像 baseline 图片由于尺寸未设定造成回流，提高渲染性能, 比较耗内存, 可通过构建工具统一处理 jpeg 图片为 Progressive
• jpeg 大于 10k 适合用 progressive，而 png 和 gif 不适合使用 interlaced，可以进行适当的有损压缩
• 如何创建 --> 构建工具或者 ps 等
• Chroma Subsampling --> 压缩方式(原来 2 像素的色值显示为同一色值)
• Encode 工具 --> MozJPEG、Guetzli 等工具进行压缩

webp

• XnConvert 转化图片为 webp， 构建工具也可以
• 兼容性只在 chrome 中
• 可通过 picture-fill(11k)实现 picture 的使用，然后在能支持 webp 的设备上使用 webp，不兼容的设备上使用别的格式

GIF

• gif 通常每帧都是原图

SVG

• Minify and Gzip
• 用预制的 tag
• 优化 path
• SVGO 等工具进行优化
• Brotli

避免 有损二次压缩有损图片

• 通过对各个格式的图片进行 2300 次压缩得知，FLIF 格式和 MozJPEG 格式图片效果还好

图片加载过程

• request => decode(图片越大时间越长) => resize(图片合适时无此步骤) => copy to GPU => Display
• 避免传输不必要的高精度和大尺寸图片
• 不同手机 decode 时间不同，手机质量越差时间越差
• 设置准确的 width 和 height
• 利用 srcset, size 属性
• 通过 srcset 针对不同 DPR 传输不同精度的图片

image sprite

• HTTP/1.x 减少图片请求 次数
• 缓存带来的问题 --> 需要合理安排每张雪碧图的内容, 减少单个图标的改变带来的 大规模图片缓存失效
• HTTP/2 anti-pattern

懒加载

• 减少初屏数据传输，缩短初始加载时间
• 懒加载的时机 --> 用户行为独立
• 一种方式：对应图片的小 kb 的 Chroma 代替，图片加载完后替换

display:none 陷阱

• 即使被 none 掉，img、audio、video 的 src 仍旧可以下载资源
• background:url()，等则不下载

缓存策略

• 需要配合服务端设置，服务端设置在响应头中
• Cache-Control:public;max-age=31536000

预加载关键资源

• 预加载是浏览器对将来可能被使用资源的一种暗示，一些在本页，一些在下页
• DNS 预解析

• subresource 预获取的另一种方式，比 prefetch 优先级高

• prefetch 预先请求该资源并放入浏览器缓存中,可以通过此绕开字体文件必须等到 DOM 和 CSS 构建完成后开始下载的瓶颈，肯能被忽略

• prerender 浏览器预渲染所有的资源

• preconnect 完成 dns 预解析、TCP 握手和建立传输层协议

• preload 预加载 一定会预加载该资源

HTTP1 与 HTTP2

• 请求方式为多路复用，通过单一的 HTTP2 连接发起多重的请求-响应消息
• http1 中浏览器客户端在同一时间， 针对同一域名下的请求有一定数量的限制，超出限制数目的请求会被阻塞

图片压缩与转换 webp 格式

• jpeg 格式图片质量在 50-100 之间时，感官上差不多， 而大小却可以缩小很多，大小优化从有排序 webp > mozjpeg > tinyfy > origin
• png 格式, 同等质量下，webp > tinyfy > pngquant > origin
• 当图片大小很大时，webp 格式优势很大，而当图片大小在 10 几 k 时，效果和普通压缩一样

项目中采用

• 适配 ratina 屏，采用 1x,2x,3x,4x 图
• 采用 cssnext,直接在 css 中采用多倍图设置,经过 postcss 转化后实为媒体查询控制
• 对于图片，可以采用 picture 标签或者 img 的 srcset 属性，采用 picturefill 进行 polyfill
• 对于 Android 手机，采用 webp 格式
• 图片进行压缩，png采用pngquant，jpg采用mozjpeg进行压缩