Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que les images de la page peuvent être optimisées pour réduire la taille de leur fichier sans affecter de manière significative leur qualité visuelle.
Présentation
Les images représentent souvent la majorité des octets téléchargés sur une page. Par conséquent, l'optimisation des images permet souvent de réaliser les économies les plus importantes en octets et en performances: moins le navigateur doit télécharger d'octets, moins il y a de concurrence pour la bande passante du client et plus vite le navigateur peut télécharger et afficher le contenu à l'écran.
Recommandations
Pour trouver le format et la stratégie d'optimisation optimaux pour vos composants Image, vous devez analyser attentivement de nombreuses dimensions: type de données encodées, fonctionnalités du format d'image, paramètres de qualité, résolution, etc. En outre, vous devez déterminer si certaines images sont mieux adaptées à un format vectoriel, si les effets souhaités peuvent être obtenus via CSS et comment fournir des éléments adaptés à chaque type d'appareil.
Optimisations pour tous les types d'images
- Suivez les bonnes pratiques pour diffuser des images responsives.
- Suivez la checklist d'optimisation des images pour chaque image.
Optimisations pour les images GIF, PNG et JPEG
Les formats GIF, PNG et JPEG génèrent 96% du trafic image total sur Internet. En raison de leur popularité, PageSpeed Insights fournit des recommandations d'optimisation spécifiques. Pour plus de commodité, vous pouvez télécharger les images optimisées directement depuis PageSpeed Insights (qui utilise la bibliothèque d'optimisation d'image disponible sur modpagespeed.com).
Vous pouvez également utiliser des outils tels que le binaire convert créé par ImageMagick, qui permet d'appliquer des optimisations similaires (voir les exemples d'instructions ci-dessous).
Si vous utilisez des outils tiers, sachez que la transformation peut agrandir vos images si les vôtres étaient déjà très bien optimisées. Dans ce cas, veuillez utiliser les originaux.
GIF et PNG sont des formats sans perte, dans la mesure où le processus de compression n'apporte aucune modification visuelle aux images. Pour les images fixes, le format PNG améliore le taux de compression avec une meilleure qualité visuelle. Pour les images animées, envisagez d'utiliser l'élément video au lieu d'un GIF afin d'améliorer la compression.
- Convertissez toujours le GIF au format PNG, sauf si l'original est animé ou tout petit (moins de quelques centaines d'octets).
- Pour GIF et PNG, supprimez le canal alpha si tous les pixels sont opaques.
Par exemple, vous pouvez convertir le binaire pour optimiser vos images GIF et PNG à l'aide de la commande suivante (les paramètres entre crochets sont facultatifs):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
Le format JPEG est un format avec pertes. Le processus de compression supprime les détails visuels de l'image, mais le taux de compression peut être 10 fois plus important que le format GIF ou PNG.
- Si elle est meilleure, réduisez la qualité à 85. Avec une qualité supérieure à 85, l'image s'agrandit rapidement, tandis que l'amélioration visuelle est faible.
- Réduisez l'échantillonnage de la chrominance à 4:2:0, car le système visuel humain est moins sensible aux couleurs que la luminance.
- Utilisez le format progressif pour les images de plus de 10 000 octets. Le format JPEG progressif présente généralement un taux de compression plus élevé que le JPEG de référence pour les grandes images et présente les avantages d'un rendu progressif.
- Utilisez un espace colorimétrique en nuances de gris si l'image est en noir et blanc.
Par exemple, vous pouvez utiliser convert binaire pour optimiser vos images JPEG à l'aide de la commande suivante (les paramètres entre crochets sont facultatifs):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Commentaires
Cette page vous a-t-elle été utile ?