Compresser vos images pour améliorer Google PageSpeed

Ce que le rapport signale vraiment

PageSpeed signale les images de plusieurs façons distinctes, et elles ne veulent pas dire la même chose. « Dimensionnez correctement les images » signifie que le fichier envoyé compte plus de pixels que l’espace dans lequel il s’affiche. « Encodez les images de manière efficace » signifie que la qualité choisie était plus élevée que ce dont l’image avait besoin. « Diffusez des images aux formats nouvelle génération » signifie que la même image serait plus légère en WebP ou en AVIF. Le premier est presque toujours le plus coûteux, et c’est celui que l’on néglige, parce qu’à l’écran la page a l’air correcte.

Le temps de chargement entre aussi en jeu. Sur la plupart des articles et des fiches produit, l’élément le plus grand à l’écran est une image : le navigateur ne peut donc pas finir d’afficher le contenu principal tant que ce fichier n’est pas arrivé. L’alléger fait bouger toute la mesure du chargement, pas seulement une ligne du rapport.

D’abord les dimensions, ensuite la qualité

Commencez par les dimensions en pixels, car c’est là que le gain est géométrique. Une photo prise au téléphone mesure couramment autour de 4000 pixels sur son grand côté. Ramenez-la à 1280 et vous ne gardez qu’à peu près un dixième des pixels, puisque la largeur et la hauteur diminuent du même facteur. Aucun curseur de qualité ne donne une réduction de cet ordre.

Choisissez la largeur en fonction de votre mise en page, pas du fichier. Si l’image se trouve dans une colonne de 700 pixels, 1280 suffit largement pour les écrans haute densité. Envoyer 4000 pixels, c’est payer le transfert de détails que personne ne verra jamais. Les seules images qui méritent leur pleine résolution sont celles qu’un visiteur peut ouvrir en plein écran d’un clic, et même celles-là ont rarement besoin de l’original complet sorti de l’appareil photo.

Ce que fait le curseur de qualité

Le JPEG fonctionne en supprimant les détails que l’œil remarque mal, et le chiffre de qualité décide jusqu’où va cette suppression. Descendez assez bas et les défauts apparaissent à des endroits prévisibles : des halos flous autour des contours nets, comme du texte ou la ligne d’un toit, et des taches dans les dégradés doux, comme un ciel dégagé ou un fond de studio. Les photos très texturées masquent bien la compression. Les aplats de couleur et le texte fin, non.

Jugez le résultat à la taille où il sera affiché, dans la mise en page qui l’accueillera. Zoomer à 300 % pour traquer les artefacts vous convaincra de garder une qualité bien plus élevée que ce dont la page a besoin, et vous publierez ce surpoids pour rien.

Quand la compression n’aide pas

Certains fichiers n’ont plus rien à donner, et insister ne fait que vous coûter de la qualité :

• Un JPEG déjà compressé une fois. Le réencoder ajoute une nouvelle série d’artefacts par-dessus les anciens, et le gain est généralement faible. Si une photo ne pèse déjà que quelques centaines de kilo-octets aux dimensions web, laissez-la telle quelle.
• Les photos enregistrées en PNG. Le compresseur garde un PNG en PNG et l’allège en réduisant sa palette de couleurs, ce qui convient aux captures d’écran et aux graphiques en aplats mais se voit sous forme de bandes sur une photo. Convertissez d’abord ces photos en JPG ou en WebP, puis compressez le résultat.
• Les icônes, les logos et les petits éléments d’interface. Quelques kilo-octets chacun, ce n’est pas ce qui a fait échouer votre audit. Cherchez plutôt la grande image en haut de la page.

Utiliser le compresseur de ce site

Le curseur de qualité va de 10 à 95. Pour le JPEG, il règle la qualité de l’encodeur. Les navigateurs ignorent cette valeur quand ils écrivent un PNG, donc pour le PNG il fixe à la place le nombre de couleurs conservées, de 256 vers le haut de la plage à 16 tout en bas, et la transparence est préservée. Le réglage de dimension maximale propose la taille d’origine, 1920, 1280 ou 800 pixels sur le plus grand côté, avec une mise à l’échelle proportionnelle pour que rien ne soit déformé. Déposez d’un coup les images d’un dossier, compressez-les toutes en une seule passe et récupérez-les dans un ZIP.

Il y a des choses qu’il ne fait volontairement pas. Il ne vise pas une taille de fichier à votre place : vous choisissez une qualité, vous regardez le résultat et vous ajustez. Il ne conserve pas les métadonnées des fichiers qu’il réencode : l’image est décodée, dessinée sur un canvas puis réécrite, si bien que les réglages de l’appareil photo, la date et l’heure et les éventuelles coordonnées GPS disparaissent. Enfin, il ne vous rendra pas un fichier plus lourd que celui que vous lui avez confié. Si le réencodage devait alourdir une image déjà bien compressée, et que vous n’avez pas demandé de dimensions plus petites, vous récupérez le fichier d’origine sans modification.

Pourquoi tout se passe dans votre navigateur

Les images que l’on compresse avant un lancement sont souvent de celles qu’on préfère ne pas confier à un inconnu : photos de produits pas encore annoncés, photos réalisées pour des clients, captures d’écran contenant des données internes. Ici, rien n’est envoyé. Le fichier est lu sur votre disque, décodé et réencodé dans l’onglet, puis enregistré dans votre dossier de téléchargements. Ouvrez l’onglet Réseau des outils de développement pendant la compression : vous ne verrez aucune requête contenant votre fichier, parce qu’il n’y en a aucune.

Quand une étape de build est la meilleure solution

Si vous publiez des images en continu, ce travail a sa place dans votre chaîne de publication, pas dans un onglet de navigateur. Un plugin de build ou un CDN d’images peut produire plusieurs largeurs et formats pour chaque image, servir la bonne version à chaque appareil et ne jamais oublier de le faire. Le faire à la main chaque semaine ne tient pas la distance, et c’est le genre de tâche qu’on arrête discrètement au bout d’un mois. Un outil dans le navigateur a la bonne taille pour la poignée de fichiers que vous vous apprêtez à mettre en ligne, ou pour les trois images lourdes qu’un audit a vraiment pointées du doigt.