responsive-images
✓使用 srcset、大小、延遲加載和現代格式（WebP、AVIF）實現高性能響應式圖像。涵蓋用於 CLS 預防的寬高比、用於藝術指導的圖片元素以及用於 LCP 優化的 fetchpriority。 使用場合：向頁面添加圖像、優化 Core Web Vitals、防止佈局變化、實施藝術指導或轉換為現代格式。
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals
| Use Case | Widths to Generate | Sizes Attribute |
| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw | | Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px | | Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw | | Sidebar thumbnail | 150w, 300w | 150px |
使用 srcset、大小、延遲加載和現代格式（WebP、AVIF）實現高性能響應式圖像。涵蓋用於 CLS 預防的寬高比、用於藝術指導的圖片元素以及用於 LCP 優化的 fetchpriority。 使用場合：向頁面添加圖像、優化 Core Web Vitals、防止佈局變化、實施藝術指導或轉換為現代格式。 來源：jezweb/claude-skills。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images- 分類
- </>開發工具
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 responsive-images？
使用 srcset、大小、延遲加載和現代格式（WebP、AVIF）實現高性能響應式圖像。涵蓋用於 CLS 預防的寬高比、用於藝術指導的圖片元素以及用於 LCP 優化的 fetchpriority。 使用場合：向頁面添加圖像、優化 Core Web Vitals、防止佈局變化、實施藝術指導或轉換為現代格式。 來源：jezweb/claude-skills。
如何安裝 responsive-images？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/jezweb/claude-skills --skill responsive-images 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/jezweb/claude-skills
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-01