OPTIMISER SON IMAGE
Un fichier image est déterminé par plusieurs attributs.
Ceux qui nous intéressent sont la résolution, la hauteur, la largeur la compression et le format de fichier.
La résolution
Concernant la résolution, exprimée en dpi, la règle est simple:
Redimensionner l’image
Pour la taille de l’image, on doit s’intéresser au support d’affichage. Si vous souhaitez importer un logo par exemple, inutile d’uploader une image qui dépasse les 500 pixels de large.
De manière générale pour les photos, nous recommandons de ne jamais dépasser les 1200 pixels de large.
Même si certains écrans offrent des supports d’affichage bien plus grands, le gain en terme de qualité ne justifie pas le temps de chargement plus long. Il ne faut pas oublier que la majorité des utilisateurs consultent votre site sur son smartphone!
Nous recommandons de ne jamais envoyer d’images pesant plus de 150ko sur WordPress.
Comment redimensionner?
On ne saurait le dire assez: vous ne devez pas compter sur WordPress ou un plugin de recompression pour réduire la taille de vos images. Si vos photos font plus de 4000 pixels de large avec un poids de 150mo, aucun plugin ne sera efficace pour ramener le poids en dessous des 150ko que nous recommandons.
Le meilleur outil payant pour traiter vos photos reste photoshop. Pour exporter pour le Web, choisissez fichiers->exportation->enregistrer pour le Web (Hérité).
Grâce à cet outil, vous pouvez paramétrer la taille de l’image, le format de l’export, la qualité de la compression. Chaque fois que vous changez un paramètre, l’outil indique le poids estimé de l’image en bas à gauche de la photo.
Sur Mac OsX : L’outil Aperçu
En ouvrant votre image sur Mac, vous disposez déjà d’une panoplie d’outils pour redimensionner l’image. Vous pouvez recadrer votre image et la redimensionner avec le menu outils-> Ajuster la taille. Si vous travaillez avec des JPEG, vous pouvez également fixer le taux de compression. Sans être aussi complet que Photoshop, cette option est pratique pour exporter rapidement vos images.
Et sur Windows: L’outil Paint
Pas super complet, l’outil Paint permet aussi de redimensionner les photos mais dans ce cas, on préfèrera se tourner vers des logiciels de retouche d’images gratuits comme l’incontournable Gimp.
Utiliser WordPress pour redimensionner la photo
Lorsque vous ajoutez une image sur WordPress, celle-ci est automatiquement redimensionnée en plusieurs versions de différentes tailles. Vous pouvez choisir entre la taille de l’image originale, une taille moyenne et une miniature.
Renommer le nom du fichier
Il est indispensable de renommer votre fichier. Pourquoi? Parce que Google indexe vos images. Et un fichier qui s’intitule IMG10349.jpg ne va pas vraiment lui parler. Nous recommandons d’injecter un maximum de mots-clés dans vos noms de fichier.
Ajouter un attribut <alt> dans vos images
Lorsque vous ajoutez une image sur WordPress, il est possible d’ajouter des descriptions, ainsi qu’un texte alternatif au cas où l’image ne se charge pas. Dans la mesure où Google est très friand de ces données, il serait dommage de ne pas les renseigner. Dès lors, quand vous avez ajouté une image sur WordPress, n’oubliez pas de remplir les champs de la colonne de droite: texte alternatif, titre, description, légende. Vous ne devez pas nécéssairement fournir un texte différent pour chacun de ces paramètres.
Le format de fichier
Le choix du format de fichier aura un grand impact sur le poids de l’image finale.
Le format JPEG
Le format JPEG est parfaitement adapté pour les photos avec beaucoup de détails, de nuances et de couleurs. C’est le format le plus employé pour les photos.
Le format PNG
Le format PNG, contrairement aux JPEG, gère la transparence et est donc idéal pour insérer un logo, une icône,… C’est un format très efficace pour des images simples, avec peu de nuances et de détails.
Le format SVG
Le format SVG est un format vectoriel, comme les fichiers AI du programme Illustrator. L’image est décrite à base de vecteurs qui permettent de redimensionner l’image à volonté sans perdre de la qualité, mais aussi de minimiser au maximum le poids du fichier. Toutefois, ce format peut affaiblir la sécurité de votre site et il n’est pas pris en charge nativement par WordPress.
Le format GIF
Popularisé par les mêmes sur Internet, le format GIF peut être une alternative au format JPEG et sera principalement utilisé pour ses facultés en terme d’animation.
La compression
La compression va avoir pour objectif de maximiser la qualité de notre image tout en maintenant un poids de fichier le plus bas possible.
Il est vivement recommandé de maintenir le poids de votre image en dessous de 150kb, même lorsque vous utilisez un plugin qui recompresse les images automatiquement.
150Kb, ça peut paraître très peu dans notre monde où l’on consomme les gigabytes à la pelle. Mais il ne faut pas oublier que votre site va comporter plusieurs images, et en additionnant toutes celles-ci, on peut vite arriver à une page pesant quelques mégabytes.
La pluspart des hébergements grands publics ne peuvent tout simplement pas assurer une performance suffisante avec des pages dont le poids se compte en mégabytes.
Sans oublier que les connexions sur Smartphones en 4G sont plus lentes que pour les connexions en WiFi et donc un site trop lourd risque de prendre beaucoup de temps à charger.
Optimiser ses images automatiquement: le plugin Imagify
Tout d’abord, il faut bien garder en tête qu’aucun plugin ne va être miraculeux pour redimensionner vos images. Si vous envoyez une photo brute de 150Mo, aucun plugin ne permettra de descendre en-dessous des 150kb.
Seule une optimisation via Photoshop, Gimp ou les outils intégrés à votre système d’exploitation vous permettront de compresser correctement vos images.
Ceci étant dit, il n’est pas inutile d’ajouter un plugin de compression sur votre site Web, ceci afin de gagner quelques Kb supplémentaires.
Notre préférence va à Imagify qui est assez simple à prendre en main et qui fait le boulot pour un tarif raisonnable et à la carte. On peut payer par mensualité ou acheter des packs de GB lorsque l’on a un important flux d’images à traiter. La version gratuite du plugin permet elle de recompresser 25mb/mois. Son interface est intuitive et l’ensemble des processus se déroule en arrière-plan de sorte que vous n’avez pas à vous en préoccuper.
Comment débusquer les images qui ralentissent votre site?
Lorsque vous travaillez sur WordPress, nous vous recommandons d’utiliser Google Chrome. Ce navigateur dispose d’une panoplie d’outils qui vont vous permettre de comprendre comment votre site fonctionne.
Rendez-vous dans le menu Afficher->Options pour les développeurs -> Outils de développement.
Vous vous retrouvez alors avec un panneau qui vous offre toutes sortes d’options pour monitorer votre site, l’onglet qui nous intéresse s’intitule ‘Lighthouse’ car il permet de faire un test de diagnostic complet.
Cliquez sur ‘Generate Report’ afin d’obtenir le rapport de votre site. Vous recevez alors une note concernant les différents aspects de votre site ainsi que des recommandations concernant la gestion de vos images.
Nous voici à la fin de notre tutoriel sur le redimensionnement des images pour WordPress. Si vous avez des questions ou si quelque chose n’est pas clair, n’hésitez pas à nous contacter!