图片优化：不同格式的图片应用场景

JPEG（Joint Photographic Experts Group）

联合图形专家小组是一种针对彩色照片而广泛使用的有损压缩图片格式。

• 介绍：栅格图形。常用文件扩展名为.jpg，也有.jepg、.jpe。JPEG在互联网上常被应用于存储和传输照片。
• 不适合：线条图形和文字、图标图形，因为它的压缩算法不太适合这些类型的图形；并且不支持透明度。
• 非常适合：颜色丰富的照片、彩色图、大焦点图、通栏banner图；结构不规则的图形。

PNG(Portable Network Graphics)

便携式网络图形是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。

• 介绍：栅格图形。PNG最初是作为替代 GIF 来设计的，能够显示256色，文件比JPEG或者GIF大，但是PNG非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持24位彩色图像（PNG-24）和8位灰度图像（PNG-8）
• 不适合：由于是无损存储，彩色图像体积太大，所以不适合。
• 适合：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。

GIF（Graphics Interchange Format）

• 图像交互格式是一种位图图形文件格式，以8位色（256中颜色）重现真彩色的图片，采用LZW压缩算法进行编码。
• 介绍：栅格图像。支持256色；仅支持完全透明和完全不透明；如果需要比较通用的动画，gif是唯一的选择。
• 不适合：每个像素只有8比特，不适合存储彩色图片。
• 适合：动画、图标。

 

webp

是一种现代图像格式，可以提供无损压缩和有损压缩两种。

• 介绍：可以同时保证一定程序上的图像质量和较小的体积；可以插入多帧，实现动画效果；支持透明度；采用8位压缩算法。无损的 webp 比 png 小26%，有损的 webp 比 jpeg 小25-34%，比 gif 有更好的动画。
• 不适合：最多可以处理256色，不适合彩色图片。
• 适合：常用于图形和半透明图像。

如何让图片加载更快？

1、用工具进行图片压缩

①对于png图片来说，可以使用jdf-png-native进行压缩, 他是node-pngquant-native工具的封装包，这个工具跨平台，压缩比高，而且压缩png24也非常的好。

• 安装方法：npm install node-pngquant-native
• 说明文档：https://www.npmjs.com/package/node-pngquant-native

const pngquant = require('jdf-png-native');
const fs = require('fs');

fs.readFile('./in.png', (err, buffer) => {
    if (err) {
        throw err;
    }
    const resBuffer = pngquant.option({}).compress(buffer);
    fs.writeFile('./out.png', resBuffer), {
        flags: 'wb'
    }, () => {})
})

②压缩 jpg 可以使用jpegtran这个工具，他也是一个node工具。使用方法比较简单，直接使用命令即可。大概压缩10%的占比。

安装方法：npm install -g jpegtran

官网：http://jpegclub.org/jpegtran

使用方法：jpegtran -copy node -optimize-outfile out.jpg in.jpg (win+R 后进入图片所在目录执行)

③于gif文件来说可以使用gifsicle工具，他是通过改变每帧比例，减小gif文件大小，同时可以使用透明来达到更小的文件体积，目前是一个公认的解决方案。

官网：http://www.lcdf.org/gifsicle/。

使用方法：gifsicle --optimize=3 --crop-transparency -o out.gif in.gif（同png 命令行方式）

这里的优化级别不要小于2，1的话代表不压缩。压缩后基本不失帧。

2、图片尺寸随网络环境变化

还有一种压缩方式是图片可以根据网络环境（wifi/4G/5G）来展示不同尺寸和像素的图片，通过在url后缀加不同参数来实现。比如下面的地址, 430可以修改为800来获得不同体积的图片。