图片优化指南

按用途选格式，而不是按习惯选格式

照片通常先看 JPEG；如果浏览器支持允许且你更看重压缩率，WebP 往往是更好的默认值；PNG 在透明背景和清晰 UI 导出场景仍然重要；而 Base64 图片数据只适合非常小的资源或受限的嵌入场景。

超大资源的隐藏成本

就算文件体积看起来还能接受，像素尺寸过大也会拖慢体验，因为浏览器仍要解码和栅格化这些像素。很多团队会压缩，却忘了缩放；或者把图片转成 WebP，但实际尺寸依然远超布局需要。所以，真正好的优化必须同时检查字节数和渲染尺寸。

• 如果展示区域远小于原图，先缩尺寸再压缩。
• 对比画质时，看实际布局尺寸，不要只看 100% 缩放。
• 大图尽量别做内联 Base64，体积膨胀会拖累传输和缓存。

一套可复用的图片优化循环

先从原图出发，把尺寸缩到布局真正需要的上限，再压成目标格式，最后同时看视觉效果和数字指标。如果资源用于首页首屏，还要顺手看移动端；如果用于文档或 UI 说明，则应该优先保证可读性，而不是只追求压缩比。