网页图片导出：尺寸、格式与质量

页面上的每张图都在和正文抢带宽。把导出做对，是性价比最高的性能优化：不用改代码、不用加构建步骤，只是三个大多数人默认做错的决策。

决策一：尺寸

一张 4000 像素宽的照片显示在 800 像素的位置，体积是需要的四倍，而且手机会先按原尺寸解码再缩小。

按布局实际渲染的尺寸导出，再补上需要的密度版本：

• 一张按 CSS 宽度导出的标准图。
• 一个 @2x 版本给高分屏，仍然是 CSS 宽度的两倍——不是原始照片的两倍。
• 用 srcset 配 sizes 让浏览器自己挑，而不是把最大的发给所有人。

经验值：如果一张图显示宽度是 720 像素，导出 1440 像素就是有用的上限。

决策二：格式

没有”最好的格式”，只有按图像类型最合适的格式：

内容	首选	原因
截图、界面、扁平插画、文字	PNG 或 WebP 无损	边缘锐利，没有振铃伪影
照片	WebP 或 AVIF	同等画质下比 JPEG 小 25–50%
照片上要透明	带 Alpha 的 WebP	PNG 的 Alpha 太重，JPEG 根本没有
印刷或归档	PNG 或 TIFF	无损、结果可预期

如果兼容性是硬约束，JPEG 应付照片仍然够用；但 WebP 在所有现代浏览器里安全已经好几年，AVIF 的支持面也铺开了。用 <picture> 做 AVIF → WebP → JPEG 的降级链，成本几乎为零。

决策三：质量

质量滑块不是线性的”好坏刻度”。从 100 降到 82，体积大约减半，而在 1:1 缩放下并排对比几乎没人能看出来；低于 70，平坦区域开始出现块状，文字边缘发糊。

实际可用的设置：

• 照片：WebP / JPEG 用 80–85。
• 截图与界面：无损，或者必须用有损时 90 以上。
• 一律在真实背景上按 100% 缩放看结果，别在预览窗口的白底上看。

最花钱的两个错误

目的地有固定背景，却导出了透明图。 带 Alpha 的 PNG 比同一张图拼合到底色上更大。背景已知就拼进去。

忘了 CSS 能干这些活。 渐变、阴影、圆角、简单形状应该交给 CSS，而不是塞进一张 300 KB 的 PNG。浏览器渲染免费，任何缩放都清晰。

每张图都跑一遍的导出流程

上传之前，对每张图过一遍：

1. 缩到实际渲染的 CSS 宽度（设计需要就再出一张 2 倍图）。
2. 按上表选格式；格式较新就加降级链。
3. 质量设 82，按 100% 看结果。
4. 剥掉不需要的元数据——但保留色彩配置，理由见 色彩管理那篇。
5. 称一下体积。内容图超过 200 KB 左右，回到第 1 步。

导出这一步不该依赖桌面软件。在 PhotoPSD 编辑器 里可以直接改文档尺寸、拼合、导出 PNG、JPEG 或 WebP；PSD 转 PNG 流程 讲拼合那部分，格式对比 讲编码细节。