图片压缩

图片压缩 是去掉图片里用不上的数据，让同一张图传得更少。典型的流程分两步：先做有损处理，去掉一部分像素数据，再做无损处理，把剩下的数据压小^[2]。图片常是页面里最大的一块，多余的字节会拖长加载时间，压过头又要把画面细节丢掉，两头都要顾。

有损与无损的分界

无损压缩不丢数据，像素一个都不改，只换更省的存法；有损压缩会减小文件大小，代价是可能降低画质^[3]。有损这一步行得通，是因为人眼对不同颜色的敏感度不一样，某些颜色可以用更少的位数编码^[2]。GIF、PNG、JPEG 之间的差别，落在执行这两步时用了哪些算法的组合^[2]。

内容决定选择。照片可以走有损，一张小了四成的照片，普通用户看起来和原图差不多^[3]。含文字的截图、图表和图标要保守：位深从每通道 8 位降到 256 色的调色板能省掉一半字节，可渐变和天空这类内容一压狠，画面会出现马赛克状的伪影^[2]。

新格式的参数也一样要挑。AVIF 把 AV1 编码的图像存进 HEIF 容器，规范支持高动态范围与广色域、透明通道，还支持用分层图像做渐进解码^[1]。同一个容器装得有损与无损两种结果，选哪种仍由图片内容决定。

质量档位的选取

有损格式的质量值常在 1 到 100 之间，它控制的是几类算法的内部运作^[2]。这里没有通用档位：要传细节精致的图，有损那一步可以跳过；只求看清主体的图，激进一档能省下一大截^[2]。Google 的建议是不要怕调低质量，观感通常可以接受，字节数的缩减却很显著^[2]。

估算视觉差异有专门工具，Google 举的例子是 Butteraugli，它用来避免把图片编码得过火^[2]。图片优化服务也能接手这一步，代价是多一项服务成本^[2]。

矢量图的做法不同。绘图软件导出的 SVG 带着图层信息、注解和 XML 命名空间，浏览器渲染时用不上，SVGO 能把示例文件从 470 字节减到 199 字节，少了 58%^[2]。SVG 是基于 XML 的格式，服务器上给它开 Gzip 压缩，传输体积还能再降^[2]。光栅图里常留着地理信息、相机信息这类元数据，删掉它们能再省一点^[2]。

批量压缩的命令

站点的图片量大，手工一张张压维持不了，放进构建流程更稳。Imagemin 支持多种图片格式，能接进构建脚本，并按输入格式挑对应的插件^[3]。压缩一个目录并覆盖原文件，用的就是这一条命令。

imagemin images/* --out-dir=images

命令行版本只配五个插件：imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-pngquant、imagemin-svgo^[3]。jpegtran 和 optipng 走无损，pngquant 走有损^[3]。要把质量写进参数，得改用 npm 模块，下面这段把 JPEG 压到质量 50，0 表示最差，100 表示最好^[3]。

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();

源文件留在版本库里，压出来的结果输出到另一个目录，跑坏了能退回原始图，这一点对批量流程比对一次构建的时间更要紧。

压过头的代价

省下的字节换不回细节。图片可以作为最大内容绘制（LCP）的候选对象，多余的字节会拉长资源加载时长^[3]，压小它确实见效；压过头之后，色块、发虚的边缘和文字的锯齿都留在画面上^[2]。带数据的图最吃亏，图例与坐标轴数字一糊，页面照样能被抓取，内容却读不出来。

图片搜索这一侧的后果

搜索结果里展示的是缩略图，小尺寸更容易暴露色块与模糊，用户看不出图片在讲什么，就不会点进详情页。百度把图片质量算作多图页面的判据之一，标准原文要求主体内容含多图时，除图片质量外，图片宽度一致、位置统一^[4]。Google 的提醒落在编码这一端：不要用过于激进的设置把质量压垮^[2]。压缩改的是体积和观感，抓取规则不动，图片能不能被收录，看的还是它所在的页面能不能被抓到。

附录

参见

• 图片优化
• 压缩
• LCP

参考资料

官方（境外）

1. 《AV1 Image File Format (AVIF)》，Alliance for Open Media。
2. 《选择正确的压缩级别》，web.dev。
3. 《使用 Imagemin 压缩图片》，web.dev。

官方（国内）

4. 《百度搜索 Mobile Friendly（移动友好度）标准 V1.0》，百度搜索资源平台，2015-12-24 更新。

外部链接

无。