⚡

图像优化Skill image-optimization

图像优化技能专注于提升网站和应用中图像资源的性能与用户体验。核心功能包括：将图像转换为现代高效格式（如WebP、AVIF），实现响应式图像以适应不同屏幕尺寸，配置懒加载以延迟非关键图像的加载，集成内容分发网络（CDN）加速全球访问，以及使用模糊占位符技术优化感知加载速度。该技能旨在通过优化图像这一关键资源，显著改善页面加载时间、核心网页指标（如LCP）并降低带宽消耗，是前端性能优化和Web开发的关键环节。 关键词：图像优化，WebP，AVIF，响应式图像，懒加载，CDN，性能优化，前端开发，LCP优化，Next.js Image

前端开发 0 次安装 0 次浏览 更新于 2/26/2026

name: image-optimization description: 图像格式、响应式图像、懒加载和CDN集成。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep

图像优化技能

提供图像优化的专业协助。

能力

  • 优化图像格式（WebP、AVIF）
  • 实现响应式图像
  • 配置懒加载
  • 设置图像CDN
  • 处理模糊占位符

Next.js Image

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
  blurDataURL={blurData}
/>

响应式图像

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="" loading="lazy" />
</picture>

目标流程

  • 图像优化
  • 性能提升
  • LCP优化