Optimiser le poids et la taille des images pour WordPress

Peliculle d'un appareil photo argantique
ThemeForestElegantThemes

Peliculle d'un appareil photo argantiquePourquoi 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

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

Logo du logiciel GIMPJe 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.

Exemple de redimenssionement et de mise à l'échelle avec GIMP

 

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

Exporter ue image avec GIMP

 

  1. Spécifier un niveau de compression maximal (9)
  2. Cliquer sur Exporter
  3. Votre image optimisée est sauvegardée, vous pouvez maintenant l’insérer dans votre article avec WordPress

Compresser une image avec GIMP

 

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é :

compresser-jpg-gimp

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.

Les différentes tailles d'images pour l'insertion dans WordPress

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

Plugin de traitements des images pour WordPressAfin 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 tout ça, et ce n’est pas finis… cet article traite de l’optimisation du poids et de la taille des images dans un souci de performance mais il reste encore à bien les référencer, ce qui fera l’objet du prochain article. Et n’oubliez pas, qu’une image vaut mille mots.

Besoin d'aide ?

Si vous avez besoin d'aide merci d'utiliser le forum WordPress, pas les commentaires. Vous y recevrez de l'aide rapidement.

Commentaires 12

  1. mercii encore une fois Thibaud pour cet article tres interessant et surtout qu’en ce moment je mets en place mon nouveau blog sur wp :)
    excellente journee

  2. Merci beaucoup, cet article m’encourage à utiliser GIMP qui, jusqu’à ce jour a été négligé au profit de solution en ligne. J’ai également enregistré que PNG est idéal pour le Web.
    En clair à chaque intervention de votre part, une nouvelle possibilité de WordPress est bien mise en exergue. Un plaisir de lire et d’appliquer.
    MERCI

  3. Bonjour,

    Comme la plupart de mes WordPress accueillent les contributions de tierces personnes, j’ai personnellement opter pour l’utilisation du plugin Omsanity qui est franchement bien pratique, mais attention à bien le régler.

    Cordialement,

    Bruno

  4. Mon site vient de voir le jour, il n’est pas encore crée, mais en cours de création.
    J’ai presque fini d’écrire les textes, je suis entrain de redimensionner mes photos, mais je n’ai pas le poids de chacun des supports (bannières….)

  5. Entendu, merci pour l’info, mais pour les sliders et autres, nécessitant de la qualité, ce n’est pas suffisant.
    Y a t il un outil directement sur wordpress qui peut compresser au niveau du serveur? Merci

  6. Bonjour,
    WP Smush.it je n’aimes pas ce plugin , je l’ai utilisé à une époque, il m’a fait perdre des images sur les 3 sites que je gère, je préfère EWWW Image Optimized

  7. Bonjour,
    J’utilise gimp pour redimensionner mes photo en général dimension 400×400 et un poids de 35kb mais la qualité est largement réduite. Pixellisation notable pour des photos déjà réduite.
    De même pour un diaporama des photos de 1200×500 arrivé à 80kb est limite pour le rendu en qualité. comment je peux obtenir une meilleur qualité de mes photos et maintenir un poids a 30kb.

    Merci

  8. sauf erreur de ma part, je n’ai pas eu de réponse à ma dernière question concernant la recherche d’un thème adéquate à ma « cliente » pour une vitrine convertible en commerce.
    Néanmoins, j’ai décidé, après avoir fait des recherches et visionné des vidéos, autos et lus des tutos, d’opter pour un DIVI.
    J’espère que j’ai fait le bon choix et SURTOUT que j’aurai un bon support en cas de difficulté.
    Merci.

  9. Un plugin WordPress qui ne touche pas aux photos sur le serveur (les images optimisées sont hébergées et distribuées par un serveur dédié) et qui permet de compresser facilement ses photos, c’est fasterImage : https://wordpress.org/plugins/fasterimage/

    1. Auteur

      Ca a l’air sympa ton plugin Nico, c’est un peu comme un CDN si j’ai bien compris ?
      Si tu veux publier un article invité sur WP-Infinity pour nous le présenter plus en détail tu es le bienvenue.
      Bonne chance pour le lancement en tout cas.

      1. Bonjour Thibaud,

        Je viens seulement de voir ton message, c’est bizarre je pense d’habitude à activer les notifications par email pour être averti des réponses…
        En effet, le plugin fonctionne un peu comme un CDN, ça a l’avantage (entre autres) de soulager le serveur des requêtes (60% des ressources sur une page sont des images!) et de pouvoir bien configurer le cache navigateur.

        Peux-tu me contacter par email pour me donner plus de détails pour publier un article invité? Je serai ravi de pouvoir en faire un!

        Merci d’avance.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Besoin d'aide ?

Si vous avez besoin d'aide merci d'utiliser le forum WordPress, pas les commentaires. Vous y recevrez de l'aide rapidement.