Image Optimization

secondsky/claude-skills/plugins/image-optimization/skills/image-optimization

作者 secondsky88378361314fMIT227 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10天前更新

Optimizes images for web performance using modern formats, responsive techniques, and lazy loading strategies. Use when improving page load times, implementing responsive images, or preparing assets for production deployment.

仅含说明Design & Creative

AI 生成的概览

指导网页图片优化，涵盖现代格式、响应式标记、懒加载与构建流程设置。

功能: 该技能为网页性能的图片优化提供参考指导。内容涵盖格式选择（JPEG、PNG、WebP、AVIF、SVG）、使用 srcset 与 picture 元素的响应式图片标记、懒加载模式、基于 Sharp 的构建流程示例、性能体积目标以及优化检查清单。它产出的是建议与代码片段，本身不运行任何工具。
适用场景: 适用于改善页面加载时间、实现响应式图片或为生产部署准备图片资源的场景。适合需要决定格式、尺寸与加载策略的前端与性能优化工作。
运行要求: 使用这些指导无需脚本或依赖包；若读者选择实现其中的 Sharp 示例，则需要 Node.js 与 sharp 包。

Image Optimization

Optimize images for web performance with modern formats and responsive techniques.

Format Selection

Format	Best For	Compression
JPEG	Photos	Lossy, 50-70% reduction
PNG	Icons, transparency	Lossless, 10-30%
WebP	Modern browsers	25-35% better than JPEG
AVIF	Next-gen	50% better than JPEG
SVG	Logos, icons	Vector, scalable

Responsive Images

html

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

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

Lazy Loading

html

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

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

Build Pipeline (Sharp)

javascript

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

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

Performance Targets

Optimization Checklist

来源与署名

来源：secondsky/claude-skills位于plugins/image-optimization/skills/image-optimization提交8837836

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Asset Type	Target Size
Hero image	<200KB
Thumbnail	<30KB
Total images	<500KB

Image Optimization

Image Optimization

Format Selection

Responsive Images

Lazy Loading

Build Pipeline (Sharp)

Performance Targets

Optimization Checklist

来源与署名

更多来自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design