Applications et sites
E-commerce & SaaS
Intelligence artificielle
Expertises techniques
Bonne pratique
Ne pas redimensionner les images coté navigateur
Ce que dit le référentiel
Ne pas redimensionner les images en utilisant les attributs HEIGHT et WIDTH du code HTML. Cette approche impose en effet de transférer ces images dans leur taille originale, gaspillant ainsi de la bande passante et des cycles CPU.
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
Notre avis
Utiliser le composant Image de Next.js permet de redimensionner les images côté serveur. Cela réduit le besoin de transférer des images de grande taille, optimisant ainsi la bande passante et diminuant la charge côté navigateur.
Les images redimensionnées sont ensuite stockées dans le cache applicatif de Next.js. Cela accélère le temps de chargement et diminue les cycles CPU nécessaires sur les terminaux des utilisateurs, améliorant ainsi l'efficacité énergétique de votre site.
Règle de validation
Le nombre d'images redimensionnées dans le navigateur doit être inférieur ou égal à 0
Ressources économisées