image-optimization
✓有關網絡性能圖像優化的專家指導。在處理圖像格式（WebP、AVIF、JPEG、PNG、GIF、SVG、HEIC、JPEG XL）、壓縮設置、響應式圖像、延遲加載、CDN、Core Web Vitals 或任何與圖像相關的 Web 開發任務時使用。涵蓋格式選擇、質量設置、srcset/尺寸、圖片元素、藝術指導、fetchpriority、佔位符策略（LQIP、blur-up、blurhash）、容器查詢、HDR/廣色域、AI 驅動的圖像工具、邊緣/無服務器處理和性能優化。
SKILL.md
| Photos | AVIF | WebP → JPEG | | Graphics/logos with transparency | SVG | WebP → PNG | | Photos with transparency | WebP | PNG | | Animations | WebP | GIF (or MP4 for long animations) | | Icons | SVG | WebP → PNG | | Screenshots | WebP | PNG |
| JPEG | 75-85 | 80 is sweet spot for photos | | WebP | 75-85 | More efficient than JPEG at same quality | | AVIF | 60-75 | Much more efficient, use lower numbers | | PNG | N/A | Lossless, optimize with tools like oxipng |
Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560
有關網絡性能圖像優化的專家指導。在處理圖像格式（WebP、AVIF、JPEG、PNG、GIF、SVG、HEIC、JPEG XL）、壓縮設置、響應式圖像、延遲加載、CDN、Core Web Vitals 或任何與圖像相關的 Web 開發任務時使用。涵蓋格式選擇、質量設置、srcset/尺寸、圖片元素、藝術指導、fetchpriority、佔位符策略（LQIP、blur-up、blurhash）、容器查詢、HDR/廣色域、AI 驅動的圖像工具、邊緣/無服務器處理和性能優化。 來源：igorvaryvoda/image-optimization-skill。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/igorvaryvoda/image-optimization-skill --skill image-optimization- 分類
- </>開發工具
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 image-optimization？
有關網絡性能圖像優化的專家指導。在處理圖像格式（WebP、AVIF、JPEG、PNG、GIF、SVG、HEIC、JPEG XL）、壓縮設置、響應式圖像、延遲加載、CDN、Core Web Vitals 或任何與圖像相關的 Web 開發任務時使用。涵蓋格式選擇、質量設置、srcset/尺寸、圖片元素、藝術指導、fetchpriority、佔位符策略（LQIP、blur-up、blurhash）、容器查詢、HDR/廣色域、AI 驅動的圖像工具、邊緣/無服務器處理和性能優化。 來源：igorvaryvoda/image-optimization-skill。
如何安裝 image-optimization？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/igorvaryvoda/image-optimization-skill --skill image-optimization 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/igorvaryvoda/image-optimization-skill