image-optimization by secondsky/claude-skills
npx skills add https://github.com/secondsky/claude-skills --skill image-optimization使用现代格式和响应式技术优化图像以提升网页性能。
| 格式 | 最佳适用场景 | 压缩效果 |
|---|---|---|
| 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>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<!-- 原生延迟加载 -->
<img src="image.jpg" loading="lazy" alt="Description">
<!-- 带模糊占位符 -->
<img
src="placeholder-blur.jpg"
data-src="image.jpg"
class="lazy"
alt="Description"
>
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 |
每周安装量
88
代码仓库
GitHub 星标数
90
首次出现
2026年1月25日
安全审计
安装于
gemini-cli75
claude-code75
codex74
opencode73
cursor73
github-copilot71
Optimize images for web performance with modern formats and responsive techniques.
| 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 |
<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"
>
const sharp = require('sharp');
async function optimizeImage(input, output) {
await sharp(input)
.resize(1200, null, { withoutEnlargement: true })
.webp({ quality: 80 })
.toFile(output);
}
| Asset Type | Target Size |
|---|---|
| Hero image | <200KB |
| Thumbnail | <30KB |
| Total images | <500KB |
Weekly Installs
88
Repository
GitHub Stars
90
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli75
claude-code75
codex74
opencode73
cursor73
github-copilot71
TanStack Query v5 完全指南:React 数据管理、乐观更新、离线支持
2,500 周安装
DigitalOcean计算服务指南:Droplets虚拟机、App Platform、Kubernetes、GPU与无服务器函数
114 周安装
Pencil 渲染器:将美学DNA代码转换为Pencil设计帧的MCP工具
111 周安装
uni-app 跨平台开发框架指南:Vue 语法一套代码编译 App/H5/小程序
116 周安装
Database Expert - Claude AI数据库专家技能,提升数据库开发与管理效率
70 周安装
Next.js 核心最佳实践指南:应用路由器、服务器组件与数据获取优化
115 周安装
Python货币转换器 - 支持150+货币汇率转换、批量处理与CSV格式化
111 周安装