Optimiser ses photos pour wordpress

1s, 2s, 3s … le visiteur vient de fermer votre site car la page est toujours en cours de chargement… Peut-être avez-vous déjà été ce visiteur impatient et frustré, non ? En tout cas moi oui !
Est-ce votre webmaster qui a mal fait son travail ? Ou est-ce plutôt le résultat des dernières photos que vous avez remplacées sur votre page d’accueil ? Et oui, c’est bien souvent la faute à des images trop lourdes et non optimisées. C’est pourquoi j’ai eu l’idée d’écrire cet article sur l’optimisation d’image pour les sites wordpress. C’est en fait une liste de choses à savoir pour insérer des photos qui donnent de la valeur à vos pages, sans pour autant les ralentir et réduire le référencement. Et pour finir, c’est à la portée de tous et toutes !

Les bénéfices d’une image optimisée

N’êtes-vous toujours pas convaincu par la nécessité d’optimiser vos images ? Voici une liste des avantages dont vous pourrez bénéficier si vos images sont optimisée pour votre site wordpress :

  • Votre site internet sera plus rapide, voir bien plus rapide !
  • Google vous appréciera davantage et votre classement dans les moteurs de recherche s’améliorera car votre score Google PageSpeed sera bien meilleur
  • Vous aurez besoin de moins de stockage sur vos serveurs et vous dépenserez moins de bande passante sur les serveurs, ce qui vous fera économiser de l’argent (imaginez 2000 visiteurs par jour x le nombres d’images à télécharger)
  • Votre taux de rebond sera plus faible et plus de visiteurs verront votre page
  • Vous bénéficierez d’une image plus professionnelle avec un site internet performant (un site lent fait tout de suite amateur)
  • Les visiteurs auront plus envie de naviguer sur votre wordpress et de cliquer sur les call to action
  • Votre webmaster sera fière de vous car vous ne détruirez pas son travail bêtement en ruinant votre référencement

J’espère maintenant avoir retenu votre attention avec toutes ces bonnes raison ! Aller, on y va ?

Les différents formats d’images

L’optimisation d’une image commence par quelques connaissances de base sur les deux formats les plus utilisés. En effet, les plus courants sur le web sont le PNG avec l’extension .png et le JPEG avec l’extension .jpg. N’utilisez surtout pas les anciens formats comme le Bitmap (.bmp), le .ico ou le .tiff. Ils sont aujourd’hui trop peu performants et doivent être oubliés.
Le JPG est donc à retenir dans la plupart des cas pour toutes les photos ou les images d’illustration. C’est le format qu’il faut utiliser la majorité du temps. Le PNG, lui, est à retenir pour des images avec très peu de couleur et pour des images dont une partie doit être transparente, telles que les logos ou les représentations d’objets dont le fond n’est pas nécessaire, voir disgracieux.

D’autres formats comme le .svg sont plus pour un usage de spécialistes (votre webmaster préféré sur Caen ou votre dévelopeur) et le .webp n’est tout simplement pas encore reconnu par tous les navigateurs internet. Pour aller plus loin dans les formats, voici une page que vous pouvez consulter : https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

Le choc des mots, le poids des photos

Les photos ont donc un poids et c’est justement ce poids que l’on cherche à limiter au maximum. Attention cependant à ne pas dénaturer la qualité de votre image en voulant réduire trop drastiquement leur poids. L’action de diminuer le poids d’une image s’appel la compression. En gros, le logiciel de traitement d’image va essayer de réduire le nombre de 0 et de 1 stockés dans le fichier image. Plus il en enlève et plus la qualité de l’image (sa définition) va diminuer, jusqu’a ne plus ressembler à grand chose. Il faut donc faire attention à compresser sans trop altérer la qualité. Les logiciels de compression sont appelés algorithmes. Les meilleurs arrivent à compresser plus que les autres avec le moins de perte de qualité possible. L’unité du poids d’une image est le BIT (binary digit). Vu qu’il y a beaucoup, mais alors beaucoup de 0 et de 1 dans un fichier image, on va parler de Kilo Octets (Ko). Ainsi, aucune image sur votre site internet ne devra dépasser 400Ko. C’est une règle absolue à respecter. Si le poids de votre photo est en Mo alors attention danger. 1Mo=1000Ko ! Ne pensez même pas utiliser vos images directement téléchargées de votre appareil photo ou de votre téléphone, elle devront être compressées car beaucoup trop lourdes. Pour exemple, les téléphones maintenant délivrent des images de plusieurs dizaines de Mo.

Il est à noter que le format PNG est plus lourd que le JPEG. C’est pour cela que nous ne l’utilisons qu’en cas d’absolue nécessité (voir paragraphe précédent).

La taille ne compte pas, seule la qualité fait de l’effet

Faux, en tout cas en ce qui concerne les images sur votre site internet. Nous pouvons économiser de l’espace en choisissant le bon format d’image et en compressant nos photos, mais nous pouvons en économiser encore plus si nous les redimensionnons avant de les télécharger sur le site internet. Mais pour conserver l’effet wow des superbes images que vous choisirez de mettre sur vos pages, il est important de savoir à quelle taille vous devriez la redimensionner !
Et bien cela dépend d’où elle sera affichée. En effet, pour une image contenue dans la page avec au maximum la moitié de la largeur, il faudra une largeur maximum de 800 pixels (vous notez hein). Tiens, mais nous n’avons pas parlé du Pixel au fait. Quel oubli !
Le Pixel est l’unité de taille. Il correspond à un petit point d’affichage de votre écran. Et oui, votre écran affiche des milliers, voir des milliards de petits points, chacun pouvant prendre une couleur et une luminosité spécifique afin de vous émerveiller les yeux. La dimension d’une image sera donc de : 800x500px par exemple. Dans le cas d’une image qui est destinée à remplir toute la largeur de votre site, il lui faudra une largeur d’au moins 1300px, voir plus ! En effet, la taille toujours plus grande des écrans et l’augmentation de leur résolution demande des photos plus grandes. Souvenez-vous qu’il y a quelques années, il n’y avait pas encore de HD (haute définition) et aujourd’hui, beaucoup d’écrans sont en 4K (deux fois plus de pixels que la HD).

Astuce : Vous pouvez redimensionner les images directement dans votre bibliothèque multimédia de votre site WordPress. Cliquez sur Média -> Sélectionnez votre image -> Modifier l’image et choisissez de nouvelles dimensions

La taille, le poids et quoi d’autre ?

Maintenant que nous avons appris les bases de l’optimisation d’image, faisons un petit résumé.
Une image pleine largeur de page fera à peu près 1300px pour un poids de 400Ko (grand maximum!). Pour une image contenue dans la page, comptez 600px de large et 250 Ko maximum. Ces valeurs sont indicatives et ne sont pas des règles absolues, tout dépend de la complexité de vos photos.

Vous pouvez trouver de nombreux outils en ligne de compression d’image et même des plugins WordPress qui réduiront la taille et le poids. Mais vous devez rester prudents, certains outils ne feront presque aucune différence et certains paramètres détruiront la qualité et rendront l’image inutile. Alors, comment trouver le parfait équilibre ? Tout d’abord, je trouve qu’il vaut mieux utiliser un outil en ligne plutôt qu’un plugin car celui-ci appliquera les mêmes règles quelque soient la images. Or, vous découvrirez avec la pratique que certaines images peuvent être assez compressées mais que d’autres non car elles perdront vite leur qualité. Plus une image à de détails et de nuances de couleurs et de contraste et plus elle sera lourde. Il vaut mieux à mon sens prendre une petite heure à apprendre à utiliser un outil en ligne plutôt que de confier la compression et le redimensionnement à un plugin qui fera cela sans discernement.

Voici un outil en ligne que je vous recommande pour sa puissance et sa simplicité : il s’agit de pixlr. Les connaisseurs de photoshop ne seront pas dépaysés puisque que pixlr reprend la même interface. Vous pouvez aussi choisir une interface plus simple à utiliser sur la page d’accueil. Ce logiciel en ligne vous permet de retoucher tous les paramètres des images, y compris les couleurs et la luminosité.

J’espère que cet article vous aura donné envie de retoucher vos photos avant de les mettre en ligne pour ne plus jamais ralentir votre site internet et votre serveur avec des images de 5Mo (oui j’ai déjà vu ça).

N’oubliez pas qu’une formation est toujours à privilégier si vous ne vous sentez pas d’utiliser un outil de compression tout seul. Il ne suffira qu’une demi-journée pour acquérir les bonnes pratiques qui feront de vous un pro de l’actualisation d’images.
Pour plus d’informations, consultez la page de mes formations wordpress sur Caen en Normandie ou me contacter directement pour une formation sur mesure.