## 选用合适的图片 * jpg - 颜色丰富的图片 * png - 纯色、透明、图标 （无损压缩，比较大） * gif - 动画、图标 * webp - 最多处理 256色，不适合颜色丰富的场景 ## 在线图片压缩 熊猫压缩 - https://tinypng.com/ ## 加载过程中使用低质量图片占位 ``` npm i lqip wepack loader - lqip-loader ``` ## 根据环境的不同，加载不同的图片 1. js 监听屏幕变化 2. css 媒体查询，根据不同的屏幕设置不同的图片的大小 3. img 标签的 srcset ## 服务器根据参数自动优化图片 1. url 上拼接一些参数，可以有压缩率、图片大小、高斯模糊、水印、图片格式转换等信息