图片优化 · 约8分钟
压缩网页图片：在体积和观感之间找到可用的平衡
图片压缩的价值，在于减少传输字节的同时，不让发布后的画面看起来受损。目标不是尽可能最小的文件，而是在用户真实看到的尺寸下仍然可用，同时保留未压缩的源文件。
压缩交付副本，而不是唯一原图
先保证可以退回重来
先准备一份可返回的源文件：相机 JPG、PNG 导出稿或无损工作稿。压缩设置应作用在副本上。如果结果过猛，可以重新再试，而不必修补已经损失细节的文件。
PNG、JPG 和 WebP 的表现不同。照片通常用 JPG 或 WebP 能明显缩小；界面图形和文字则更适合保留 PNG，或使用较温和的 WebP 设置。
本指南的工作流程示意图。
可重复的压缩步骤
按真实显示尺寸判断质量
一张在 160 像素缩略图上看起来可接受的横幅，放到全宽时仍可能出现振铃或发糊的文字。两种尺寸都要检查。
- 压缩前先复制源文件。
- 若原图远大于实际版位，先调整到页面或平台使用的尺寸。
- 打开 ImageTool.cc 图片压缩工具，选择 JPG、PNG 或 WebP。
- 从中等质量和一个实际的目标体积开始。
- 以 100% 和缩略图尺寸检查边缘、文字、肤色和渐变。
- 下载压缩结果，并把原图放在单独文件夹。
本指南的工作流程示意图。
案例：商品详情图库
不同版位使用不同体积
商品页可能同时使用 400 像素卡片、1200 像素放大图和社交正方形图。用一张超大 JPEG 同时应付三个版位，会让卡片浪费带宽，放大图仍可能发软。应为每个版位生成正确尺寸的副本，再分别压缩。
如果目录包含透明抠图，应保留 PNG 或 WebP 母版。只有目标平台要求不透明背景时，才适合压成小 JPEG。
本指南的工作流程示意图。
什么时候应该停止压缩
可见损伤就是上限
- 发布尺寸下文字、标志或细线已经断裂时，停止继续加压。
- 天空和产品背景出现色带时，宁可文件稍大一些。
- 不要对同一张 JPG 反复压缩，每次都从源文件重新导出。
- 用压缩工具生成交付副本；只有目标平台要求时，再转换格式。