前端性能优化一：图片格式和应用场景

1. 图片格式和应用场景介绍:

(1). JPEG格式:

①. 有损压缩图形格式:
    a. 扩展名为jpg、jpeg、jpe

②. 场景:
    a. JPEG在互联网中常被用于存储和传输照片.

③. 不适合:
    a. 线条图形和文字、图标图形:
       (1). 因为它的压缩算法不太这些类型的图形
       (2). 不支持透明度

④. 非常适合:
    a. 颜色丰富的照片、彩色图大焦点图、通栏banner图
    b. 结构不规则的图形

(2). PNG格式:

①. 无损压缩的位图图形格式:
    a. 扩展名为jpg、jpeg、jpe
    b. 支持索引、灰度、RGB三种颜色
    c. 支持Alpha通道的半透明和透明特性
    d. 非常好的保留了图像质量

②. 场景:
    a. JPEG在互联网中常被用于存储和传输照片.

③. 不适合:
    a. 无损存储,文件太大.

④. 非常适合:
    a. 纯色(三角形、菱形)、透明、线条绘图和图标
    b. 边缘清晰、有大块相同颜色区域
    c. 颜色数较少,但需要半透明(钱包的icon)

(3). GIF格式:

①. 位图图形文件格:
    a. 仅支持完全透明和完全不透明
    b. 以8位色(即256种颜色)重现真彩色的图像,采用LZW压缩算法进行编码.

②. 场景:
    a. JPEG在互联网中常被用于存储和传输照片.

③. 不适合:
    a. 每个像素只有8比特,不适合存储彩色图片.

④. 非常适合:
    a. 比较通用的动画(loading)
    b. 动画
    c. 图标

4. WEBP格式:

①. 位图图形文件格:
    a. 可为图像提供无损压缩和有损压缩
    b. 图像数据压缩算法能同时保证一定程序上的图像质量和比较小的体积
    c. 可以插入多帧,实现动画效果
    d. 可以设置透明度,采用8位压缩算法
    e. 无损的Webp比PNG小26%
    f. 有损的Webp比JPEG小25 - 34%
    g. 比GIF有更好的动画
    h. 集合其它图片格式特点:
       (1). JPEG适合压缩照片和其它细节丰富的图片.
       (2). GIF显示动态图片.
       (3). PNG支持透明图像,图片色彩非常丰富.

②. 场景:
    a. JPEG在互联网中常被用于存储和传输照片.

③. 不适合:
    a. 最多处理256色,不适合于彩色图片(jpeg那种图片)

④. 非常适合:
    a. 常见的图形
    b. 半透明图像
    c. 在消耗3G、4G流量移动应用里面特别友好.

(1). 缺点:

①. 大面积应用webp的用户,如果不抛弃原有格式,存储的数据量将会增加60%.

②. 七牛云webp可以进行实时转码,转码后的图片会直接存储于七牛云.

③. 兼容性要做处理:
    a. https://caniuse.com/#search=webP

④. png格式转换:
    a. 七牛加参数
    b. imagemin-webp:
       https://www.npmjs.com/package/imagemin-webp
    c. gulp-webp:
       https://www.npmjs.com/package/gulp-webp

⑤. 展示不如JPG好看(鲜艳、清晰等),移动端权衡可以接受.