用途
该技能面向网页性能优化，专注于图片资源的优化处理。当需要改善页面加载时间、实现响应式图片或懒加载策略时使用。
主要能力
格式选择
资料给出各图片格式的适用场景与压缩表现：
- JPEG：适合照片，有损压缩，可减少 50-70%。
- PNG：适合图标与透明图，无损压缩，可减少 10-30%。
- WebP：适合现代浏览器，比 JPEG 好 25-35%。
- AVIF：下一代格式，比 JPEG 好 50%。
- SVG：适合标志与图标，矢量、可缩放。
响应式图片
通过 <picture> 元素配合多种格式的 <source> 与带 srcset、sizes 的 <img> 实现响应式加载，示例代码：
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img
src="image.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Description"
loading="lazy"
decoding="async"
>
</picture>
懒加载
支持原生懒加载与模糊占位图两种方式：
<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">
<!-- With blur placeholder -->
<img
src="placeholder-blur.jpg"
data-src="image.jpg"
class="lazy"
alt="Description"
>
构建管线（Sharp）
提供基于 Sharp 的图片优化函数示例：
const sharp = require('sharp');
async function optimizeImage(input, output) {
await sharp(input)
.resize(1200, null, { withoutEnlargement: true })
.webp({ quality: 80 })
.toFile(output);
}
性能目标
资料列出各类资源的体积目标：
- 主图（Hero image）：<200KB
- 缩略图（Thumbnail）：<30KB
- 图片总量：<500KB
优化检查清单
- 使用 WebP 并提供 JPEG 回退
- 实现响应式 srcset
- 对首屏以下内容启用懒加载
- 以质量 70-85 进行压缩
- 通过 CDN 提供资源
- 设置正确的缓存头
适用场景
适用于需要提升网页加载速度、实施响应式图片方案、配置懒加载以及搭建图片构建管线的开发场景。
限制
资料未提供该技能的具体安装方式、运行环境要求、支持的平台范围、收费信息及实际效果数据，这些内容暂未提供。