用途
该技能面向现代 Web 应用的「生产级图片优化」，主要用于优化 Largest Contentful Paint（LCP）、降低页面体积与带宽、实现响应式图片、通过模糊占位符提升感知性能，以及转换为现代图片格式（AVIF、WebP）。
主要能力
- Next.js Image 组件：介绍
next/image的静态导入（适合静态资源）与远程图片用法，涉及priority、placeholder、quality、sizes、fill等属性。 - 响应式图片 sizes：为全宽 hero、侧栏图片、卡片网格等场景配置
sizes，按断点提供合适尺寸的图片。 - 模糊占位符：静态导入可自动获得模糊效果；远程图片需提供
blurDataURL，示例使用plaiceholder在构建期生成 base64。 - 格式选择（AVIF/WebP）：通过
next.config.js的images.formats启用 AVIF/WebP，并配置deviceSizes、imageSizes；非 Next.js 场景可用<picture>元素回退。 - 懒加载模式：默认懒加载（首屏以下），首屏使用
priority预加载；非 Next.js 场景用原生loading="lazy"、decoding="async"。 - 图片 CDN 配置：在
next.config.js中通过remotePatterns配置外部图片域名白名单；示例给出 Cloudinary loader 写法。 - 艺术指导（Art Direction）：通过
useMediaQuery或 CSS 按断点切换不同图片。 - SVG 与图标优化：小图标内联、大量图标使用 SVG sprite，大型装饰性 SVG 使用 Image 组件。
- 性能指标影响：以表格形式列出 AVIF 格式、响应式 sizes、模糊占位符、priority 加载、懒加载对 LCP、CLS 与带宽的影响。
- 反模式清单：列出缺少 width/height、全部 eager 加载、LCP 图片未设 priority、照片使用 PNG、单一图片尺寸等常见问题及解决方案。
- 构建期优化：给出
sharp（Next.js 自动安装）与 Squoosh CLI 的批量优化命令。
使用方式
技能以代码模式与配置片段呈现，核心示例包括：静态导入 hero 图片并设置 priority、placeholder="blur"、sizes="100vw"；远程图片配合显式尺寸与 sizes；产品卡片响应式 sizes；next.config.js 中启用 AVIF/WebP 与 remotePatterns；Cloudinary 自定义 loader；以及构建期生成 blurDataURL 与批量格式转换命令。
适用场景
适用于需要改善图片性能的 Next.js（含 Next.js 16 Image）项目，尤其是关注 LCP、CLS 与带宽的场景，如首屏 hero 图、产品卡片网格、侧栏图片、多断点响应式布局与 CDN 图片分发。
限制
技能未提供具体的收费、价格或商业条款信息；除文中提及的 AVIF/WebP 体积缩减等表述外，未给出独立基准测试或部署平台要求。相关参考资料路径包括 references/cdn-setup.md、scripts/image-component.tsx、checklists/image-checklist.md、examples/image-examples.md。