Sizing d'Images Responsive

Ce qu'elle fait

Cette compétence codifie les meilleures pratiques pour servir des images à la taille d'affichage correcte. Elle guide un agent ou un réviseur dans l'audit des fichiers images, du balisage et des pipelines de build/CDN pour identifier les images surdimensionnées qui gaspillent de la bande passante, démontre comment générer des variantes responsives et fournit des exemples concrets de HTML avant/après. L'accent est mis sur des gains de performance mesurables (économies 'Properly size images' de Lighthouse) et des corrections reproductibles à travers les composants et les templates.

Quand l'utiliser

Utilisez cette compétence lors de revues de performance, de revues de code PR ou d'audits de site lorsque les images apparaissent dans Lighthouse ou les métriques de terrain comme contributeur principal à la taille de chargement. Elle est particulièrement utile pour les sites avec de grandes images héro (hero images), des mises en page responsives ou du contenu riche en images où une utilisation incorrecte de srcset/sizes entraîne un sur-téléchargement sur mobile.

Ce qui est inclus

• Scripts : aucun (has_scripts=false)
• Références : inclut un fichier references/rule.md détaillé avec des conseils d'implémentation et des exemples de frameworks
• Instructions : vérifications étape par étape (comparaison des largeurs intrinsèques vs rendues, vérification de srcset, ajout de sizes, production de variantes avec Sharp/Squoosh) et une checklist de revue de code pour des corrections précises au niveau du fichier

Agents compatibles

Probablement compatible avec les agents polyvalents capables d'exécuter des commandes shell et d'inspecter les fichiers d'un dépôt (Copilot/Codex/Claude Code/agents supportant la revue de code au niveau du fichier).