Corriger « Améliorer la diffusion des images » dans PageSpeed Insights

1. 01Ouvrez la page concernée dans PageSpeed Insights ou Lighthouse. Choisissez le rapport mobile ou ordinateur, développez « Améliorer la diffusion des images » et notez l’URL signalée et la modification proposée.
2. 02Repérez l’image sur la page. Dans les outils du navigateur, comparez le fichier reçu aux dimensions affichées en tenant compte de la densité de l’écran. Vérifiez la source choisie, pas seulement l’original de la médiathèque.
3. 03Si l’image servie contient trop de pixels, corrigez d’abord les tailles adaptatives ou le thème. Si les dimensions conviennent, comparez compression et autre format accepté.
4. 04Préparez une copie aux bonnes dimensions dans un éditeur. Utilisez le compresseur Bitinz pour les fichiers adaptés et examinez textes, contours, transparence et dégradés avant tout remplacement.
5. 05Publiez l’image ou le modèle modifié. Vérifiez que la page demande la nouvelle image, et non une ancienne version en cache, puis relancez le rapport avec le même appareil.

Chrome estime le gain à partir du poids reçu et d’un ratio octets/pixel efficace pour le format. Les gains estimés inférieurs à 4 KiB ne sont pas signalés. Ce seuil sert au rapport : ce n’est pas un poids maximal conseillé.

Lighthouse 13 a remplacé les anciens audits d’image par cette analyse ; Lighthouse 12 affichait déjà les analyses par défaut. Format inadapté, dimensions excessives et animation lourde demandent des corrections différentes. Consultez compresser des images pour un site pour le processus global.

• WordPress: vérifiez la taille choisie dans le bloc ou thème et le balisage réel srcset et sizes. WordPress génère des images adaptatives, mais un modèle personnalisé ou une description inexacte de la mise en page peut fournir une mauvaise taille. Modifier l’original peut laisser des copies générées en service.
• Shopify: son CDN optimise déjà les images de la boutique, dont le choix du format. Shopify indique qu’une compression manuelle avant importation est inutile. Face à une alerte, examinez la largeur demandée et le balisage adaptatif du thème au lieu de dégrader la source à répétition. Le développeur peut vérifier image_url et image_tag.
• Next.js: utilisez les réglages adaptatifs du composant Image et adaptez sizes à la mise en page, surtout avec fill. Sans valeur adaptée, une image étroite peut être considérée comme occupant toute la fenêtre et une version plus grande téléchargée. Changer uniquement la qualité ne corrige pas ce décalage.

Gardez un original modifiable. Pour les images servies indépendamment, comparez poids réel et rendu ; notre comparatif JPG, PNG et WebP aide à choisir. Bitinz ne redimensionne pas. Une conversion WebP peut alourdir le fichier : gardez la version adaptée à la page.

Pour des publications régulières, l’API développeur traite les fichiers adaptés avec un compte et un quota mensuel. Elle ne répare ni le balisage du thème ni sa mise en page adaptative. Revérifiez la page publiée après intégration.

• L’URL signalée correspond à l’image et à la version modifiées.
• Le navigateur choisit une source adaptée sur téléphone et écran large.
• La compression garde les détails utiles, la transparence et les dégradés doux.
• L’image principale visible n’est pas retardée par un chargement différé inadapté.
• Le nouveau rapport utilise le même appareil ; rendu et chargement réels sont aussi vérifiés.