responsive-images
✓Implémentez des images réactives performantes avec srcset, tailles, chargement paresseux et formats modernes (WebP, AVIF). Couvre le rapport hauteur/largeur pour la prévention CLS, l'élément d'image pour la direction artistique et la priorité d'extraction pour l'optimisation LCP. À utiliser lorsque : l'ajout d'images aux pages, l'optimisation de Core Web Vitals, la prévention d'un changement de mise en page, la mise en œuvre d'une direction artistique ou la conversion vers des formats modernes.
Installation
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 |
Implémentez des images réactives performantes avec srcset, tailles, chargement paresseux et formats modernes (WebP, AVIF). Couvre le rapport hauteur/largeur pour la prévention CLS, l'élément d'image pour la direction artistique et la priorité d'extraction pour l'optimisation LCP. À utiliser lorsque : l'ajout d'images aux pages, l'optimisation de Core Web Vitals, la prévention d'un changement de mise en page, la mise en œuvre d'une direction artistique ou la conversion vers des formats modernes. Source : jezweb/claude-skills.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images- Source
- jezweb/claude-skills
- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que responsive-images ?
Implémentez des images réactives performantes avec srcset, tailles, chargement paresseux et formats modernes (WebP, AVIF). Couvre le rapport hauteur/largeur pour la prévention CLS, l'élément d'image pour la direction artistique et la priorité d'extraction pour l'optimisation LCP. À utiliser lorsque : l'ajout d'images aux pages, l'optimisation de Core Web Vitals, la prévention d'un changement de mise en page, la mise en œuvre d'une direction artistique ou la conversion vers des formats modernes. Source : jezweb/claude-skills.
Comment installer responsive-images ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/jezweb/claude-skills --skill responsive-images Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/jezweb/claude-skills
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01