图片相关的优化

3santiago3

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 图片压缩

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

在线压缩网址:

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 格式更小。

图片描述

图片描述

阅读 346
102 声望
1 粉丝
0 条评论
你知道吗?

102 声望
1 粉丝
宣传栏