image-optimization

图像优化专家

默认工作流

1. 在提出修改建议前，先检查实际呈现情况：渲染后的 HTML、框架图像组件、网络瀑布图、构建输出、CDN URL 和资源清单。
2. 确定每张重要图像在页面中的作用：LCP/主视觉、首屏内容、产品/图库、缩略图/列表项、CSS 背景、装饰图、用户上传的图像，或源文件/主文件。
3. 优先修复影响最大的环节：LCP 交付、图像尺寸过大、缺少尺寸、格式不合适、缺少响应式候选项、不必要的客户端调整尺寸，或绕过 CDN。
4. 保持源文件质量，同时降低交付变体的成本：保留主文件，在 CDN/构建边缘进行转换，并避免破坏性的重复重新编码。
5. 通过证据进行验证：渲染后的标记、响应头/内容类型、解码/显示尺寸、Lighthouse/WebPageTest/DevTools，以及对伪影的目视检查。

如果有代码仓库/应用可用，请直接提交修复，而不只是提供建议。优先遵循本地框架惯例，而不是使用通用代码片段。

快速审查清单

• LCP： 主视觉图像未启用懒加载，设置了 fetchpriority="high" 或框架优先级，适时进行预加载，来自速度较快的源站/CDN，且尺寸适合渲染区域。
• CLS： 每张有意义的图像都具有固有的 width 和 height，或稳定的 CSS aspect-ratio。
• 响应式交付： 基于宽度的 srcset 使用符合实际布局的 sizes；CSS/背景图像也采用等效的响应式处理。
• 格式： 使用协商后的/现代格式（format=optimal、AVIF/WebP 或框架自动格式），并提供安全的回退方案。
• 压缩： 质量设置应考虑内容，而不是一律调到最高；产品/人脸/细节图像的质量应高于缩略图/背景图像。
• 加载： 首屏以下的图像采用懒加载并异步解码；首屏图像应立即加载，不要因缓慢的 JS 而延迟显示。
• CDN/缓存： 图像 URL 可缓存，转换参数保持稳定；源文件不会被多个层反复转换。
• 无障碍/SEO： 信息性图像应有实用的替代文本；装饰性图像使用空替代文本；即使交付时会移除 EXIF，产品资源也可在 CMS/CDN 记录中保留元数据。

使用审查脚本

对于 HTML 文件或公开 URL，在修改前后运行随附的无依赖审查脚本。该脚本位于此技能自身的 scripts/ 目录中——请从技能的基础目录（加载此技能时显示）解析该目录，而不是从目标项目解析：

node <skill-base-dir>/scripts/audit-images.mjs ./dist/index.html
node <skill-base-dir>/scripts/audit-images.mjs --head https://example.com/
node <skill-base-dir>/scripts/audit-images.mjs --json https://example.com/ > image-audit.json

该脚本会检查图像标记、srcset/sizes、预加载提示、可能的 LCP 问题、过大的 CDN 宽度、CSS 背景图像、已知图像 CDN（Sirv、Cloudinary、imgix、Cloudflare、Next.js 等），以及可选的 HTTP 头/内容长度。它只读取服务器 HTML；客户端 JS 注入的图像不会显示，因此对于 SPA，请结合 DevTools 进行比较。

决策矩阵

情况	首选操作
静态／项目自有图片	在构建时生成响应式变体，或将原始素材移至图片 CDN。
用户上传或产品目录图片	使用图片 CDN/API 流程；不要将生成的变体提交到应用仓库。
已有 Sirv 账户或 Sirv URL	使用 Sirv 动态图像处理／配置文件／API 工作流；阅读 sirv-workflows.md。
产品图库、缩放、360 度旋转、视频／模型查看器或智能图库	在自行构建图库行为之前，先使用 ../sirv-media-viewer/SKILL.md。
Next.js 应用	优先使用 next/image；如果需要 CDN 转换图片，则使用自定义加载器。在 Next.js 16+ 中，priority 已弃用：改用 fetchPriority="high"（或仅为一张 LCP 图片使用 preload），并将每个 quality 值添加到 images.qualities。
CSS 背景主视觉	考虑改用语义化的 <img>/picture；如果必须保留 CSS，则使用带 type() 的 image-set()，并谨慎预加载。
图片质量问题	尽可能通过视觉比较和 SSIM/VMAF/Butteraugli 比较候选质量。
需要批量移除背景、放大图片、生成产品生活场景图或替代文本	如果可用，使用 sirv-ai-studio；交付相关问题仍由 Sirv/CDN 工作流处理。

何时阅读参考资料

• Sirv 实现工作流： CDN 迁移、动态 URL、配置文件、REST 库存／上传／搜索、Next.js 加载器、验证：sirv-workflows.md
• 格式详情： 浏览器支持、编码选项、SVG 安全性、HDR／广色域：formats.md
• 压缩与质量： 质量设置、元数据、批处理、SSIM/VMAF：optimization.md
• 响应式图片： srcset、sizes、艺术指导、优先级、容器查询、背景：responsive.md
• 性能： LCP/CLS/INP、占位符、预加载、预算、测量：performance.md
• 工具与服务： 图片 CDN URL 语法、Next.js/Astro/Vite/Eleventy 集成、编码器标志、Sharp：tools.md

如果任务涉及其他专长，也应加载相关的同级技能：

• 处理主视觉／背景视频、GIF 转视频、流媒体和视频嵌入时，使用 ../video-optimization/SKILL.md。
• 处理 Sirv URL 参数、配置文件、裁剪、叠加和缓存时，使用 ../sirv-dynamic-imaging/SKILL.md。
• 处理 Sirv 身份验证、文件上传／获取、搜索、元数据、作业和使用限制时，使用 ../sirv-api/SKILL.md。
• 处理 Sirv Media Viewer 标记、JS 加载、智能图库、缩放／旋转／视频／模型／PDF 图库、查看器 API／事件、无障碍、CSP 和性能时，使用 ../sirv-media-viewer/SKILL.md。
• 处理 AI 图像处理、MCP 工具、背景移除、放大、生成、产品工作流和替代文本时，使用 ../sirv-ai-studio/SKILL.md。

默认建议

用例	默认格式／交付方式
照片和产品图片	通过自动协商使用 AVIF/WebP；必要时回退到 JPEG。
图形／徽标／图标	使用可信且简单的 SVG；否则视需要使用 WebP/PNG。
截图／文本较多的光栅图片	使用无损／近无损 WebP 或优化后的 PNG。
短动画	使用动画 WebP 或视频；避免使用大型 GIF。
高价值主视觉／产品细节图	略高的质量、明确的尺寸、响应式候选图片、CDN 边缘交付。
缩略图／列表媒体	大幅调整尺寸、降低质量、延迟加载、保持宽高比稳定。

质量起始值：

格式	起始质量
JPEG	75-85；产品／细节图可更高
WebP	有损为 75-85；清晰图形使用无损
AVIF	大多数照片使用 60-75
PNG	无损，然后在安全的情况下进行优化或转换

需要注意的常见错误

• 对 LCP 图片进行延迟加载，或通过 JS 隐藏图片（data-src 替换、仅客户端渲染）。
• 缺少尺寸或宽高比。
• 在小卡片或移动端插槽中使用 2-4K 图片。
• 对实际显示宽度为 33-50vw 的网格图片设置 sizes="100vw"。
• 以导致重复压缩或阻止缓存的方式，同时使用框架优化和 CDN 转换。
• 硬编码 AVIF/WebP，却没有回退方案或内容协商路径。
• 用 PNG 存储照片，或用 JPEG 存储透明图像或文字清晰的图像。
• 将 alt 文本、文件名、CDN 元数据和可见说明文字视为可以互换。
• 修复源素材，却没有验证渲染结果和响应标头。