该技能用于在 Astro 项目中统一处理响应式图片，全部在构建时本地完成，不在运行时或 CDN 上处理。核心机制是「模式（Pattern）= 渲染宽度」：每个模式包含一组宽度与 sizes，480px 为必备宽度，宽高比独立于模式。
主要能力：三种格式按 AVIF → WebP →（JPG 或 PNG）依次回退；每种格式拥有独立质量，AVIF 质量低于 WebP（默认 AVIF 50、WebP 60、JPG 62、PNG 无损），同一宽度下 AVIF 应小于 WebP；回退按透明通道自动选择，不透明照片用 JPG、透明图用 PNG。提供 Picture、ArtPicture、FixedImage 组件，ArtPicture 用于不同断点使用不同图片或裁切，浏览器只下载一张；禁止用两个 img 加 CSS 隐藏实现。
使用方式：将 boilerplate 中的组件、配置、lib 与脚本复制到项目对应目录；用 Picture 搭配 pattern 渲染内容图片，LCP 图片加 lcp 标记，首屏 2–3 张加 aboveFold，其余懒加载；固定尺寸场景使用 FixedImage。针对 /public 预优化图片集，可使用 optimize-images.mjs 脚本（依赖 sharp），通过 npm run images、images:force、images:clean 增量或全量生成，源文件保存在 IMG_SRC，输出在 IMG_OUT，输出目录视为可丢弃产物。
适用场景：Astro 站点的响应式内容图、主视觉（hero）、卡片、多列布局、logo 头像，以及 OG/社交分享图构建时生成（OG 必须为 JPG，按平台提供多种比例与尺寸）。
限制与注意：图片 SEO 依赖源文件名（kebab-case 关键词-地域 slug）、准确的 alt 文本、figure/figcaption 与结构化数据，robots.txt 不得屏蔽 /_astro/。质量与格式变更后需用 --force 重新生成；--clean 会删除整个 IMG_OUT，仅当所有输出都有源文件时使用。每页只允许一个 lcp，禁止固定宽度图片预加载；未知布局使用 HALF 模式。具体收费、平台支持范围等资料暂未提供。