mcpField
I
image-optimization

image-optimization

github.com/secondsky开发240596 次安装5 周前更新
代码仓库

关于 image-optimization

image-optimization 是面向开发者的 Web 图像优化技能，涵盖格式选择、响应式图像交付和基于 Sharp 的构建示例，并提供体积目标与性能检查清单。

主要功能

  1. 01按图像类型选择格式
  2. 02响应式图像技术
  3. 03基于 Sharp 转换为 WebP
  4. 04图像体积目标
  5. 05优化检查清单

适用场景

  1. 01为网页准备图像
  2. 02减少图像传输体积
  3. 03设置响应式图像交付

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/secondsky/claude-skills --skill image-optimization

安装后在 Claude Code 中输入/image-optimization确认已加载。

详细介绍

图像优化

通过现代格式和响应式技术优化图像，提升 Web 性能。

格式选择

格式最适用于压缩率
JPEG照片有损，可减少 50-70%
PNG图标、透明图像无损，可减少 10-30%
WebP现代浏览器比 JPEG 好 25-35%
AVIF新一代格式比 JPEG 好 50%
SVG徽标、图标矢量、可缩放

响应式图像

<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>

延迟加载


<img src="image.jpg" loading="lazy" alt="Description">


<img
  src="placeholder-blur.jpg"
  data-src="image.jpg"
  class="lazy"
  alt="Description"
>

构建流水线（Sharp）

const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output);
}

性能目标

资源类型目标大小
主视觉图像<200KB
缩略图<30KB
图像总计<500KB

优化清单

  • 使用 WebP，并提供 JPEG 回退方案
  • 实现响应式 srcset
  • 为首屏以下的内容启用延迟加载
  • 将压缩质量设为 70-85
  • 从 CDN 提供资源
  • 设置适当的缓存标头

评论

支持 Markdown