Pourquoi optimiser les images pour le WEB ?

Une image trop lourde nuit fortement à la vitesse de chargement d’une page WordPress, et il s’agit là d’un critère important pris en compte par les moteurs de recherche. Une page trop longue à charger va non seulement décourager les internautes, mais également les spiders (les robots qui scannent vos pages afin de les indexer dans les SERP) et vous serez pénalisé en terme de référencement.

Les trois formats d’image les plus couramment utilisés pour le web sont :

– PNG : recommandé par le W3C, ce format gère la transparence. Toutefois un peu lourd.

– JPEG : ce format permet de compresser l’image avec perte de qualité. Donc plus léger, mais au détriment de la qualité et de la transparence.

– GIF : moins utilisé que les deux précédents, ce format prend néanmoins en charge l’animation.

Réduire le poids et la taille des images avec GIMP

Ce point est extremement important si vous utilisez un thème WordPress pour photographe qui a besoin de grandes photos en arrières plan.

La résolution d’une image destinée au web n’a pas besoin d’être très élevée. 1024px de large est un maximum pour obtenir une qualité correcte sur Internet. Réduire la dimension de vos photos vous permet en outre de les protéger, une image de cette taille n’étant pas commercialisable. Il existe donc une manipulation simple à effectuer avant toute intégration d’image sur votre site web.

GIMP

Je vous recommande GIMP pour traiter vos images. Gimp est un outil de retouche d’images open source, donc gratuit, qui vous permettra de réduire la taille, mais aussi la qualité des images.

Redimensionner une image

Une fois GIMP installé, ouvrir une image, puis cliquer sur Image dans le menu supérieur, puis sur Echelle et taille de l’image.

Modifier seulement la largeur de l’image, puis cliquer sur la chaîne qui signifie mettre à l’échelle, pour conserver les proportions.

Compresser une image

Cliquer ensuite sur Fichier > Exporter, toujours dans le menu supérieur.

1. Commencer par renommer l’image
2. Cliquer sur Sélectionner le type de fichier
3. Choisir JPEG de préférence (plus léger), PNG (indispensable pour la transparence mais plus lourd), ou GIF pour une image animée.
4. Vous pouvez à ce moment là choisir d’exporter un PNG en JPEG, ce qui reste le meilleur moyen de réduire le poids d’une image en PNG si vous n’avez pas besoin de transparence.
5. Cliquer sur exporter
6. Spécifier un niveau de compression maximal (9)
7. Cliquer sur Exporter
8. Votre image optimisée est sauvegardée, vous pouvez maintenant l’insérer dans votre article avec WordPress

NB : Lorsqu’on choisit d’exporter au format JPEG la fenêtre de compression d’un fichier est plus avancée avec entre autre, l’ajout d’une option de prévisualisation de la qualité :

Fonctionnement de la bibliothèque de WordPress

L’idéal est donc d’envoyer une image dans la bibliothèque de WordPress aux dimensions souhaitées. Toujours dans l’idée d’accélérer la vitesse de chargement des images, WordPress va automatiquement en créer 4 exemplaires :  miniature, moyenne taille, grande taille et original. Voici pourquoi :

Votre thème peut dans certains cas avoir besoin d’une miniature de l’image envoyée, notamment pour l’image à la une, la vignette, etc.. C’est pour ça que WordPress génère 4 images aux dimensions définies dans l’onglet Réglages > Médias de votre tableau de bord. Les miniatures existant déjà au format nécessaire, cela évite à wordpress de les redimensionner à la volée à chaque fois que la page est chargée.

Lors de l’insertion d’une image dans un article, vous avez aussi le choix entre ces 4 tailles.Donc si vous voulez insérer la même image une seconde fois à une dimension inférieure, vous pouvez vous aussi utiliser un de ces formats prédéfinis.

N.B. : Si la taille de l’image que vous envoyez dans la bibliothèque de WordPress est inférieure au format « Grande taille » défini dans les réglages de WordPress, ce format ne sera pas créé. Les images que vous envoyez ne peuvent pas être agrandies par WordPress, la qualité serait trop mauvaise. Seules les tailles inférieures à l’originale seront générées.

Des plugins WordPress en complément… et pour traiter les images déjà envoyées

Afin de vous faciliter la tâche, des plugins ont été développés pour optimiser vos images automatiquement. L’énorme avantage est qu’ils traitent les images déjà présentes. Certains d’entre vous ont déjà dans leur bibliothèque des milliers d’images non optimisés.

Attention ! Il convient de faire un backup du répertoire /wp-content/uploads/ avant d’installer les plugins suivants, au cas où les choses tournent mal. Certaines actions sont irréversibles sans backup !

Imsanity

Le plugin WordPress Imsanity vous permet de redimensionner les images trop grandes à 1024px de large maximum. Vous avez peut-être envoyé des images à des dimensions exagérées comme 3000px de large pour 2000px de hauteur. Il vous suffit de définir une taille maximale, 1024px max de large par défaut, et toutes vos images plus larges que 1024px sont redimensionnées automatiquement, et gardent le même nom de fichier.

Imsanity permet aussi de réduire la qualité des JPG automatiquement au niveau désiré, et de convertir les formats BMP en JPG.

Toutes les futures images dont la résolution excède 1024px de large seront redimensionnées lors de l’envoi.

Par contre il ne traite pas les formats PNG en qualité, seulement en taille. Vous aurez besoin du plugin suivant pour traiter les formats PNG :

WP Smush.it

WP Smush.it compresse toutes les images déjà présentes dans la bibliothèque de WordPress, puis automatiquement toute nouvelle image lors de l’envoi sans perte de qualité. Voici comment il procède :

• Suppression des métadonnées au sein des fichiers JPEG
• Optimisation de la compression JPEG
• Conversion de certains fichiers GIF en PNG
• Suppression des couleurs non utilisées

Ce qui veut dire qu’après avoir traité vos images avec GIMP, WP Smush.it arrivera toujours à sauver quelques Ko.

Limites d’utilisation de l’API Yahoo Smush.it :

1. L’image doit être inférieure à 1 Mo, sinon elle ne sera pas traité. (Pas de problème vous avez utilisé GIMP auparavant.)
2. L’image doit être accessible via une URL non HTTPS
3. Ce plugin ne peut pas compresser les images stockées sur un CDN (un autre serveur que celui où est installé WordPress)

Conclusion

Et oui c’est du boulot, et ce n’est pas finit… cet article traite de l’optimisation du poids et de la taille des images dans un souci de performance, mais il reste encore à bien référencer les images en remplissant les balises Title et alt. Mais ça fera l’objet d’un prochain article. Et n’oubliez pas, qu’une image vaut mille mots.