· 全部指南
格式选择黄金法则
照片类图像优先使用 WebP（85% 质量）或渐进式 JPEG，可减少 50-70% 体积。使用 Towalles 的 image-converter 工具时，浏览器本地处理确保原始图片不上传，特别适合含敏感信息的素材。纯色图形和透明背景必须选择 PNG-24，但需通过 image-compressor 进行无损压缩。
测试显示：1200×800 的电商产品图，WebP 平均比 JPEG 小 42%，而 PNG 在不透明场景下体积会大 3-5 倍。记住：Safari 14+ 已全面支持 WebP，现在可以放心使用。
现代压缩技术实践
启用懒加载前，务必使用 image-compressor 进行基线压缩。对于 1MB 以上的大图，先调整物理尺寸再压缩——1080px 宽度通常足够满足 Retina 屏幕需求。推荐保存两份资源：高质量原图（CDN 存储）和 30-50KB 预览图（首屏加载）。
注意：Twitter/Facebook 等平台的分享图片需单独处理。建议保留 1200×630 的 JPEG 版本（至少 600KB），因为社交平台会二次压缩。使用浏览器工具可避免上传原始设计稿到第三方服务器。
Favicon 现代最佳实践
2023 年 favicon 标准已简化：只需提供 32×32 PNG（透明背景）和 180×180 Apple Touch Icon。使用 Towalles 的 favicon-generator 时，选择「现代模式」可自动生成这两种尺寸，且所有处理都在浏览器本地完成。
重要技巧：将 favicon.ico 和 apple-touch-icon.png 直接放在网站根目录，避免不必要的重定向。测试表明这能使图标加载速度提升 300-500ms，对 LCP 指标有积极影响。
LCP 性能关键优化
首屏英雄图（Hero Image）的优化至关重要：使用 WebP 格式、宽度匹配视口 1.3 倍（例如 1600px）、启用预加载（）。通过 image-converter 本地处理可实时预览不同压缩级别对画质的影响。
监控发现：将 LCP 图片从 JPEG 转为 WebP 后，移动端加载时间平均减少 1.2 秒。记住优先优化这「20% 的关键资源」，它们影响 80% 的感知性能。隐私友好的本地工具让优化过程更安全高效。
按内容选格式
照片 → 常用带质量上限的 WebP/AVIF；图标 → 能 SVG 就 SVG；含文字截图 → 警惕压糊。关注 LCP：头图过大比页脚多 1KB 更伤。
流水线
- 缩放到最大展示尺寸（srcset），不要用相机原图。
- 对文字密集图设可见质量下限再压缩。
- 公开图剥离 EXIF。
- 导出后快速核对尺寸与元数据。
缓存与 CDN
文件名指纹化以拉长缓存。不要把会话相关图片放进无界缓存键。按模板记录字节预算（首页头图、文内图、缩略图）。
按任务选格式
照片通常用 AVIF/WebP 并保留 JPEG 回退；UI 图标优先 SVG 或压缩 PNG。不要全站强行一种格式。改默认后在真实设备上测 LCP。
先隐私，后美观
发布用户照片前去掉 GPS 与个人 EXIF。样本含敏感位置时，用 Towalles 图片工具本地处理。带着私密元数据上线的「优化」仍是隐私缺陷。
工作流
- 去除敏感元数据。
- 缩放到实际需要的最大展示尺寸。
- 按质量目标压缩，而不是凭感觉。
- 在 Retina 与中端机上复查视觉回归。
CLS 与尺寸
压缩图也要预留宽高（或 aspect-ratio）。文件变小但布局跳动，同样伤害 Core Web Vitals。
图片性能运维
动生产前先写操作程序：输入、期望输出、负责人与回滚。Towalles 上的工具便于本地检查样例，不能替代变更控制。
前置条件
- 有代表失败案例的脱敏 fixture。
- 清楚谁是真相来源（应用、网关、CMS 或网络设备）。
- 能在非生产环境或用合成数据复现问题。
步骤
- 用 fixture 复现，记录精确命令或 UI 路径。
- 按需用格式化、哈希或解析工具与已知正确样例对照。
- 做最小修复；同一变更里避免顺手重构。
- 补充回归测试或清单项，避免下一任 on-call 重复踩坑。
- 更新 runbook：症状 → 检查 → 修复。
善后
观察 24–72 小时错误率与支持工单。若做过一次性数据修复，安排后续防止复发。工单里保留截图与哈希，不要留真实密钥。
反模式
- 把生产密钥贴到公开页面「只是看一下」。
- 上线却不写回滚说明。
- 把本地绿色演示当成多区域生产的证明。