Aujourd’hui je vais vous parler de l’importance de compresser les images de votre site internet.
Pour préparer les fichiers au-delà de la seule compression, consultez le guide des dimensions, formats et usages des images WordPress. Partez de la taille d’affichage du visuel et vérifiez le rendu du fichier obtenu.
Une page qui tarde à s’afficher peut décourager vos visiteurs, surtout sur mobile. Les images méritent donc un vrai coup d’œil quand on cherche à accélérer un site. Leur poids varie d’une page à l’autre : mesurez les fichiers réellement chargés avant de décider quoi réduire.
La vitesse fait partie de l’expérience de visite. Elle ne suffit pas, à elle seule, à vous faire passer devant un concurrent dans Google. Voici trois façons de préparer des images plus légères sans les transformer en bouillie de pixels.
1. Compresser ses images avec Photoshop
Dans Photoshop, commencez par adapter la largeur et la hauteur en pixels à l’usage prévu. Exportez ensuite une copie dans un format approprié et ajustez la qualité en observant le résultat. L’emplacement des commandes d’export peut varier selon la version du logiciel.
La capture ci-dessous illustre une ancienne interface : retenez surtout le principe du réglage de qualité et du contrôle du poids à l’export.
Faut-il passer de 300 à 72 dpi pour le web ? Ce n’est pas ce réglage qui compresse l’image. Sans rééchantillonnage, modifier cette valeur conserve le même nombre de pixels. Pour l’affichage web, travaillez d’abord les dimensions en pixels, le format et la qualité de compression.
Par exemple, si une photo s’affiche sur une largeur d’environ 800 pixels, une version de 1 600 pixels peut être utile sur un écran à forte densité. C’est un repère à adapter au thème et aux images responsives du site, pas une taille obligatoire pour toutes les photos.
2. Compresser ses images en ligne
Pas de Photoshop sous la main ? Un outil de compression en ligne peut vous aider. Gardez votre original, travaillez sur une copie et comparez le fichier obtenu avec l’image de départ. Ne transmettez pas de visuel confidentiel à un service tiers sans avoir vérifié si cet usage convient à votre projet.
Mon petit préféré, même si l’ergonomie du site n’est pas spécialement bien pensé, est Convertir une image. Vous pouvez d’ailleurs grâce à ce site créer votre favicon.ico. La compression est efficace et rapide.
Je peux également vous parler de Compressor qui a une ergonomie et un graphisme tendance, de plus vous avez moyen de voir le résultat en ligne de la compression sur votre image.
A vous de choisir 🙂
3. Compresser ses images avec WordPress
Une extension comme WP Smush peut traiter les images de votre médiathèque selon ses réglages et les possibilités de la version utilisée. Vérifiez quelles tailles elle prend en charge au lieu de supposer que tous les originaux et toutes les miniatures seront traités de la même façon.
Avant un traitement par lot, conservez une sauvegarde et essayez sur quelques fichiers. Contrôlez ensuite le rendu et le poids réellement chargé dans les pages. Convertir une image en WebP ou en AVIF peut être intéressant si votre chaîne de traitement le permet ; gardez le fichier qui donne le bon compromis pour le visuel concerné.
Pour suivre mes prochains articles et conseils WordPress, vous pouvez aussi me suivre sur facebook.
Une question sur les images de votre site ? Écrivez-moi à cedric@envision.fr.
Pour aller plus loin : Pixels et résolution dans Photoshop · Images et référencement
Articles pouvant vous intéresser
