网站图片优化完整清单：格式、尺寸、懒加载与自动化

用 PageSpeed Insights 或 Chrome DevTools 的 Lighthouse 跑一遍，看「Opportunities」里的图片相关项：Properly size images（尺寸过大）、Serve images in next-gen formats（格式老旧）、Efficiently encode images（压缩不足）。报告会给出每一项预估能省多少流量，从省得最多的改起。

• 照片类一律 WebP 或 AVIF，比 JPG 小 25%-50%；保留 JPG 兜底给老浏览器（<picture> 多源）
• 图标、Logo 用 SVG（矢量，无限缩放）；必须位图时用 PNG 或无损 WebP
• 动图用动画 WebP 替代 GIF，体积降 60%-80%
• 所有位图上线前过一遍压缩：画质 75 是肉眼无损的甜点区间

• 永远不要直接部署相机原片：按最大展示尺寸 × 2 导出
• 用 srcset + sizes 提供多尺寸：手机屏加载 800px 版本，桌面加载 1600px 版本
• 给 <img> 写死 width/height（或 aspect-ratio），避免加载时的布局偏移（CLS）

• 首屏主图（LCP 候选）：加 fetchpriority="high"，禁止懒加载，必要时 preload
• 首屏之外的图：loading="lazy"，滚动到附近才加载
• 静态资源开启长缓存（内容哈希命名 + immutable），字体和图片域名启用 preconnect

人工压缩无法覆盖持续产出内容的网站（博客、电商上新）。可靠的做法是把压缩变成流水线的一环：构建脚本在部署前批量调用压缩 API，或在上传回调里自动处理。

本站提供免密钥的压缩 API（60 次/分钟/IP）与官方 npm SDK，三行代码接入现有构建流程：读文件、压缩、写回。PNG 调色板量化、mozjpeg、WebP、AVIF 全部支持，可指定目标体积与输出尺寸。