网页图片如何优化:尺寸、格式、压缩与验证

网页图片优化要同时考虑清晰度、传输体积和展示方式。一个实用顺序是：保留原图，确定显示需求，比较格式与压缩效果，最后回到实际页面验证。文件变小可以减少图片传输量，但整页速度还受网络、脚本、缓存和服务器响应等因素影响。

先区分三个量

例如，图片显示为 600 CSS 像素宽时，可以把约 1200 像素宽的源图作为 2 倍像素密度场景的候选，再检查清晰度和体积。这是选择示例，不是所有图片的固定倍数或上限。需要放大查看的图片还应考虑放大需求。

按布局提供合适的图片

如果同一张图片会在不同布局中显示，可准备多个尺寸，并通过 HTML 的 srcset 与 sizes 告诉浏览器有哪些候选和预计显示宽度。浏览器还会结合设备条件选择资源。不要把桌面最大显示宽度当成唯一导出标准。

MDN 的响应式图片指南解释了分辨率切换、不同裁切方案和相关属性的使用。实际配置后，应检查浏览器加载了哪个文件，不能只看页面外观。

选择格式时做对比

• 照片可以比较 JPEG、WebP、AVIF 等候选，结合目标浏览器和视觉质量决定。
• 含文字、界面截图或透明边缘的图片，可比较 PNG 与支持相应模式的 WebP 等格式。
• 简单矢量图形可考虑经过安全处理的 SVG；并非所有照片都适合转成矢量图。

不存在对所有内容都最小的格式。压缩质量参数也不是跨工具通用的画质尺度，不能把某个工具的“80”直接等同另一个编码器的“80”。应在同一组测试图片上对比输出。

压缩、元数据和原件保护

先在副本上操作。无损优化可以调整编码方式或去除不必要的数据；有损优化则可能改变像素信息。减少 PNG 色数可能产生失真，但这并不意味着 PNG 没有其他无损优化空间。

删除元数据时注意方向和颜色表现。对于依赖方向标记正确显示的照片，应先处理方向并验证结果；颜色配置变化也可能影响显示。不要把所有元数据一概视为无用。

如果使用在线工具处理图片，应先了解数据处理方式。某个功能断网仍可运行，不足以证明工具在联网前后从未传输数据；本地处理图片和不收集任何使用数据也不是同一个承诺。敏感图片应优先采用你能确认处理边界的方案。

回到真实页面验证

1. 在目标设备和实际显示尺寸下检查文字、边缘、渐变与透明区域。
2. 查看浏览器网络面板中的图片请求、资源大小和所选尺寸。
3. 检查图片出现时是否推动页面布局；合理声明尺寸或宽高比。
4. 首屏关键图片与屏幕外图片采用不同加载策略，不要一律延迟加载。
5. 更换格式后，在目标浏览器验证回退方案。

web.dev 的图片性能指南可作为格式和加载策略的进一步参考。优化记录最好同时保留原文件、处理参数、输出大小和视觉检查结果，而不是只记一个压缩百分比。