Skill 详情

image-optimization

通过压缩、现代格式和响应式技术优化网页图像，以减小文件大小。

匹配类型可能匹配已针对图像生成审核

来源aj-geddes/useful-ai-prompts外部来源

报告安装量648仅表示受欢迎程度

使用前先检查

自动化审核只检查相关性，不代表安全审查或推荐。使用前请阅读来源中的说明。

在 skills.sh 查看（打开外部页面）在 GitHub 阅读 SKILL.md （打开外部页面）

已保存的来源预览

SKILL.md

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: image-optimization
description: >
  Optimize images for web to reduce file size without sacrificing quality. Use
  compression, modern formats, and responsive techniques for faster loading.
---

# Image Optimization

## Table of Contents

- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)

## Overview

Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.

## When to Use

- Website optimization
- Responsive image implementation
- Performance improvement
- Mobile experience enhancement
- Before deployment

## Quick Start

Minimal working example:

```yaml
Format Selection:

JPEG:
  Best for: Photographs, complex images
  Compression: Lossy (quality 70-85)
  Size: ~50-70% reduction
  Tools: ImageMagick, TinyJPEG
  Command: convert image.jpg -quality 75 optimized.jpg

PNG:
  Best for: Icons, screenshots, transparent images
  Compression: Lossless
  Size: 10-30% reduction
  Tools: PNGQuant, OptiPNG
  Command: optipng -o3 image.png

WebP:
  Best for: Modern browsers (90% support)
  Compression: 25-35% better than JPEG/PNG
  Fallback: Use <picture> element
  Tools: cwebp
  Command: cwebp -q 75 image.jpg -o image.webp

SVG:
  Best for: Icons, logos, simple graphics
// ... (see reference guides for full implementation)
```

## Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents |
|---|---|
| [Image Compression & Formats](references/image-compression-formats.md) | Image Compression & Formats |
| [Responsive Images](references/responsive-images.md) | Responsive Images |
| [Optimization Process](references/optimization-process.md) | Optimization Process |
| [Monitoring & Best Practices](references/monitoring-best-practices.md) | Monitoring & Best Practices |

## Best Practices

### ✅ DO

- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying

### ❌ DON'T

- Skip testing or validation
- Ignore error handling
- Hard-code configuration values

在 GitHub 阅读完整来源