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