image-optimization
✓Conseils d’experts sur l’optimisation des images pour les performances Web. À utiliser lorsque vous travaillez avec des formats d'image (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), des paramètres de compression, des images réactives, un chargement différé, des CDN, Core Web Vitals ou toute tâche de développement Web liée aux images. Couvre la sélection du format, les paramètres de qualité, le srcset/tailles, l'élément d'image, la direction artistique, la priorité de récupération, les stratégies d'espace réservé (LQIP, flou, flou), les requêtes de conteneurs, la gamme de couleurs HDR/large, les outils d'image basés sur l'IA, le traitement Edge/sans serveur et l'optimisation des performances.
Installation
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
Conseils d’experts sur l’optimisation des images pour les performances Web. À utiliser lorsque vous travaillez avec des formats d'image (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), des paramètres de compression, des images réactives, un chargement différé, des CDN, Core Web Vitals ou toute tâche de développement Web liée aux images. Couvre la sélection du format, les paramètres de qualité, le srcset/tailles, l'élément d'image, la direction artistique, la priorité de récupération, les stratégies d'espace réservé (LQIP, flou, flou), les requêtes de conteneurs, la gamme de couleurs HDR/large, les outils d'image basés sur l'IA, le traitement Edge/sans serveur et l'optimisation des performances. Source : igorvaryvoda/image-optimization-skill.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/igorvaryvoda/image-optimization-skill --skill image-optimization- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que image-optimization ?
Conseils d’experts sur l’optimisation des images pour les performances Web. À utiliser lorsque vous travaillez avec des formats d'image (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), des paramètres de compression, des images réactives, un chargement différé, des CDN, Core Web Vitals ou toute tâche de développement Web liée aux images. Couvre la sélection du format, les paramètres de qualité, le srcset/tailles, l'élément d'image, la direction artistique, la priorité de récupération, les stratégies d'espace réservé (LQIP, flou, flou), les requêtes de conteneurs, la gamme de couleurs HDR/large, les outils d'image basés sur l'IA, le traitement Edge/sans serveur et l'optimisation des performances. Source : igorvaryvoda/image-optimization-skill.
Comment installer image-optimization ?
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/igorvaryvoda/image-optimization-skill --skill image-optimization 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/igorvaryvoda/image-optimization-skill
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01