图片相关的优化

1. png8 / png24 / png32 之间的区别

• png8

  • 1 像素的色彩需要 8 bit 来表示
  • 共支持 2⁸ = 256 种颜色
  • 支持透明

• png24

  • 1 像素的色彩需要 24 bit 来表示
  • 共支持 2²⁴ = 16777216 种颜色
  • 不支持透明

• png32

  • 1 像素的色彩需要 24 bit 来表示
  • 共支持 2²⁴ = 16777216 种颜色
  • 支持透明

选择 png8、png24 还是 png32 取决于业务场景，比如一张大部分是蓝色的大海照片，其实选择 png8 就足够了。

2. png 格式和 jpg 格式的比较

• jpg

  • 有损压缩，压缩率高
    
  • 不支持透明
  • 适合大部分不需要透明图片的场景

• png

  • 支持透明，浏览器兼容性好
  • 适合大部分需要透明图片的场景

3. 优化技巧及相关案例

3.1 图片压缩

根据真实图片情况，舍弃一些相对无关紧要的色彩信息。

在线压缩网址：

• 智图
• TinyPNG

3.2 CSS 雪碧图

把多张图片整合到一张图片中。

• 优点：减少 HTTP 请求数量。
• 缺点：如果这张相对较大的图片加载速度较慢，并且万一最后没有正常加载的话，那么整个页面都不能正常展示了。

Sprite Cow

3.2.1 Facebook 网站案例

3.3 image inline

将图片以 base64 编码的形式内嵌到 html 中。

• 优点：减少 HTTP 请求数量。
• 缺点：转化成 base64 编码的字符串占的体积可能比图片本身还要大。

根据业务需求权衡，推荐体积小于 8kb 的图片使用 image inline。

3.3.1 淘宝移动端网站案例

3.4 使用 webp 格式

• 优点：具有更优的图像压缩算法，带来更小的图片体积，并且拥有肉眼识别无差异的图片质量。
• 缺点：适用于安卓系统，在 iOS 上有兼容问题。

3.4.1 淘宝移动端网站案例

同样一张照片的大小比较，webp 格式要比 jpg 格式的小。

3.5 矢量图

• 优点：体积较小
• 缺点：适合图片样式简单的场景

在 阿里巴巴矢量图标库 下载 png 格式和 svg 格式的同一个图标，比较可看出，svg 格式更小。