En général un site web contient beaucoup d’images (Imaginez qu’en 2020, les images représentent environ 50% de la bande passante sur le net) et vous avez peut-être lu ou entendu qu’il était de bonne pratique d’optimiser les images de son site. Mais concrètement, pourquoi faut-il faire l’effort de diminuer la taille de vos images web (les compresser)? Alors qu’on vous le dise tout de suite, la compression des images est un point très important de l’optimisation d’un site web et on va vous expliquer pourquoi en détail dans la suite de cet article.
Cet article explique comment compresser vos images pour optimiser leur poids, j’ai aussi écrit un article qui explique comment optimiser les dimensions de vos images en fonction de la taille et du type d’écran.
Qu’est-ce qu’une image et que faut-il optimiser?
Il existe plusieurs formats d’images différents (raw, jpeg, png, gif…) et ce qui les différencie principalement est la quantité d’informations que contient chaque type d’images. Imaginez que vous preniez la même image en raw, en png ou jpeg, vous remarquerez que le fichier raw est beaucoup plus lourd que le png et le jpeg. C’est parce que le fichier raw contient un maximum d’informations sur l’image pour permettre aux photographes de retoucher leur photo en leur laissant un maximum de possibilités. D’ailleurs les photographes utilisent des logiciels de retouche photos pour travailler les fichiers raw et exporter le résultat en jpeg ou png.
Les jpeg et png sont des formats d’images compressées cad que par rapport au fichier raw, elle contiennent déjà beaucoup moins d’informations et sont donc moins lourdes (le poids de l’image en Mb est réduit). Ce type d’images convient donc déjà beaucoup mieux à l’affichage sur un site web. Mais souvent ces formats d’images contiennent encore des métadonnées (date, caractéristiques techniques de la photo…) et des informations qui ne sont pas forcément indispensable pour des photos sur internet.
L’idée donc pour des images destinées à être mise en ligne sur des sites web, c’est de réduire un maximum le poids de l’image tout en gardant une qualité d’image suffisante pour que l’œil humain ne fasse pas de différence.
3 raisons de compresser les images de son site
C’est bien joli de vous expliquer qu’il y’a différents types d’images, mais pourquoi au juste vaut il mieux réduire la taille de vos photos sur votre site web :
- Pour améliorer la vitesse de chargement de votre site : Chaque image affichée sur une page web doit être téléchargée par votre navigateur. Et évidemment plus le fichier de l’image est léger, plus le téléchargement sera rapide. Comme les internautes de nos jours s’attendent à avoir les pages web qui s’affichent de plus en plus vite, cela améliorera leur expérience de navigation et les incitera à rester sur votre site plus longtemps.
- Pour les moteurs de recherche (le SEO) : Ce qui est bon pour les internautes l’est aussi en général pour Google (qui cherche à donner les meilleurs résultats de recherche pour eux). Il est donc assez naturel qu’un site qui charge lentement soit un peu pénalisé par google. En compressant vos images, vous améliorerez votre vitesse de chargement et probablement votre référencement par la même occasion.
- Pour diminuer l’espace de stockage sur votre serveur : L’espace de stockage que vous utilisez chez votre hébergeur n’est pas gratuit alors autant l’optimiser un peu en diminuant la tailles de vos images.
Optimiser les images sans pertes ou avec pertes de qualité
Déjà qu’est-ce que ça veut dire avec ou sans perte de qualité ? Imaginez que vous venez de prendre une très jolie photo avec votre appareil en format raw (l’image pèsera peut-être autour des 25Mb), vous retouchez votre photo avec votre logiciel favori et l’exportez avec une belle qualité au format jpeg. Vous remarquerez que votre image est maintenant moins lourde (peut-être 5-10Mb) mais elle contient peut-être encore des informations inutiles pour l’affichage sur internet (comme les métadonnées du genre la dates, les coordonnées gps, les caractéristiques techniques de la photo…).
Optimiser les images sans pertes de qualité veut dire qu’on va simplement enlever toutes ces informations qui ne sont pas indispensables sans toucher aux pixels de l’image: En gros toutes ces métadonnées non indispensable sont enlevées mais l’images reste intacte. Du coup la qualité est toujours parfaite mais vous n’avez probablement pas diminué de beaucoup la taille de l’image (peut-être 0-10%).
Optimiser les images avec pertes de qualité veut dire qu’en plus d’enlever les métadonnées, on va aussi modifier les pixels de l’image pour essayer d’obtenir le meilleur rapport poids /qualité d’image. L’idée étant vraiment de réduire le plus possible le poids de l’image sans que la différence sur la qualité de l’image ne soit visible à l’œil humain (et avec ces techniques, on peut réduire le poids de l’image jusqu’à 70-90%)
Pourquoi je vous conseille de compresser vos images avec perte de qualité
Si vous vous intéressez un peu à l’optimisation de votre site web, vous avez sûrement déjà rentré l’url de votre site dans des outils comme le page speed insight de google ou encore l’outil de Pingdom. Et même si vous avez déjà optimisé vos images sans perte de qualité, vous aurez sûrement remarqué que ces outils vous conseillent encore d’optimiser la taille de vos images. Et pourquoi ça ? Simplement parce que ces outils partent du principe qu’il est maintenant recommandé d’utiliser des techniques d’optimisation d’images avec perte de qualité pour que le web en général soit plus rapide.
Mais je vais rassurer tout de suite les photographes parmi vous, optimiser les images avec perte de qualité en 2019 ne veut PAS dire faire des compromis sur la beauté des images. Il existe des outils avec des algorithmes très puissant qui réduisent drastiquement le poids de vos images sans que vous ne puissiez voire aucune différence à l’œil nu (en tout cas à mon avis). Si vous ne me croyez pas je vous laisserai tester vous-même mais voici à mon avis les meilleurs outils pour compresser vos images pour le web.
Plugins WordPress pour optimiser la taille de vos images
Je vais m’intéresser ici aux plugins wordpress qui vous permettent d’optimiser automatiquement vos images. Ces outils vous permettent aussi d’optimiser directement des images mais installer un plugin assure simplement que toutes les images que vous utilisez sur votre site sont optimisées pour le web (c’est toujours ça de moins à penser non ? 😉 ). Par contre, pour obtenir une compression d’images importante et de bonne qualité, les outils à disposition ne sont pas gratuits.
J’ai effectué un test et comparatif complet des 7 plugins d’optimisation d’images WP les plus populaires. Et il en ressort que les 2 meilleurs plugins sont bien ceux que je recommande ci-dessous.
Voir le comparatifs des plugins WP
Depuis que j’utilise WordPress, j’ai testé plusieurs plugins d’optimisation d’images, mais 2 d’entre eux ressortent du lot selon moi :
Ewww Image Optimizer : C’est un des premiers plugins que j’ai utilisé pour l’optimisation de la taille des images et je l’ai installé sur la plupart des sites que je développe. Ce plugin permet de faire gratuitement l’optimisation sans perte de qualité. Il permet aussi d’optimiser toutes les images déjà existantes sur votre site, de définir des dossiers à optimiser en dehors de votre dossier upload, de définir une dimension maximum pour les images etc… Ce plugin est très flexible et robuste et je n’ai jamais eu un seul soucis en l’utilisant.
Pour l’optimisation avec perte de qualité (que je vous recommande vraiment), ewww image optimizer utilise TinyPng dans le background (un des meilleurs outil d’optimisation d’images) pour produire des superbes images visuellement mais réduite en poids de 70-90%! Après avoir traité vos images avec ewww, le page speed insight de google ne se plaindra plus de la taille de vos images croyez-moi ;). Le prix par images pour la compression avec perte de qualité est de 0.002$/image ce qui fait 10$ les 5000 images (les 500 premières images sont gratuites)
Voir le Plugin ewww Image Optimizer
ShortPixel : J’ai découvert le plugin shortpixel assez récemment en faisant des tests d’optimisation d’images car j’ai obtenu une compression d’image plus importante pour le format d’images jpeg qu’avec ewww (c’est le seul outil qui m’a donné des fichiers plus petits que ewww pour un format d’images). En revanche, en comparant la qualité des images produites, j’ai trouvé que leur compression “lossy” était trop agressive et que la dégradation de la qualité d’images était trop importante pour moi. Mais leur compression “glossy” produit de jolies images (un peu mois belles que ewww mais les fichiers sont un peu plus petits) et pourrait être une bonne solution. Leur plugin est aussi très intuitif, flexible et vous permettra de faire la même chose qu’avec ewww image optimizer (le prix par images optimisée est aussi un peu moins élevé que pour ewww… il vous en coûtera 5$ pour 5000 images avec 100 images gratuites par / mois pour commencer).
Voir le plugin ShortPixel
Important : quand vous ajoutez une image dans wordpress, vous optimiserez à chaque fois 5-6 images (voir plus) car wordpress créé plusieurs copies de taille différentes de vos images au moment de l’upload
Si vous ne savez quel plugin choisir, vous pouvez comparez gratuitement la compression obtenue avec ewww sur le site de TinyPng et celle de ShortPixel avec une de vos images. Mais pour vous aider un peu plus, voici un exemple d’image avec les différents types de compression proposés par ces deux logiciels.
Donc à mon avis, la compression lossy de ShortPixel est trop agressive et dégrade trop la qualité des images (malgré le poids de 119kb obtenu)… je dirais que le meilleur rapport poids / qualité d’images est obtenu par la compression “Maximum lossy” du logiciel ewww image optimizer (250kb) suivi de près par la compression “Glossy” de ShortPixel (256kb). Dans les 2 cas, on voit certes une petite différence dans le ciel mais c’est vraiment minime et la qualité est acceptable à mon goût. Pour un résultat absolument parfait, la compression “lossy” de ewww est ce qu’il vous faut mais la taille de l’images reste de 390kb.
Donc en ce qui me concerne, je vais continuer à tester le logiciel Shortpixel quelques temps car le prix de l’optimisation par image est assez intéressant (5$ pour 5000 images) et si le plugin est robuste, c’est un sérieux concurrent pour ewww image optimizer. Mais sinon, la compression Maximum lossy de ewww est excellente et je n’ai jamais eu un seul problème avec ce plugin.
EWWW image optimizer à mis à jour ses compressions et proposent dorénavant les compression pixelperfect plus, premium et premium plus. Vous retrouverez mon test et comparatif complet des meilleurs plugins de compression d’images dans cet article.
La version 5.3 de WordPress introduit aussi son lot de modifications dans la gestion des images. j’ai écrit un article complet sur ce sujet dans cet article.
Voilà, vous en savez maintenant un peu plus sur le sujet de l’optimisation des images pour le web. A mon avis, l’utilisation d’un outil performant pour réduire la poids de vos images est très important (tout en gardant une belle qualité d’images) et je vous conseille vraiment d’essayer un des 2 outils que je vous ai présenté ci-dessus.
Mais même si vous avez des images optimisées sur votre site web, cela ne veut pas forcément dire que votre site affiche l’image la plus petite possible en fonction de la taille et du type d’écran utilisé par les internautes. Dans cet article, j’ai aussi abordé la question pas forcément simple des images adaptatives (ou responsive images en anglais).
NB: Cet article contient des liens affiliés sur les sites ShortPixel et Ewww Image Optimizer. En passant par nos liens vous ne payez rien de plus, mais par contre nous toucherons une petite commission.
Ewww Image Optimizer est l’outil que nous utilisons au quotidien sur tous nos sites et pour lequel nous payons également pour la compression de nos images. Nous n’utilisons pas ShortPixel mais nous l’avons testé en détail afin de vous proposer ce comparatif.
Salut Benoit !
Excellent ton article, on comprend bien l’intérêt de ces 2 plugins.
J’ai cependant une question concernant les poids des photos qui me laissent perplexe. OK, la photo « lossy » de Shortpixel à 119 KB est trop dégradée contrairement (et pour cause) à celle de Ewww en « maximum lossy » qui fait 250KB. Mais avec 10-12 images par article, est-ce que qu’il n’y pas un risque que ton article soit trop lourd en définitive ?
Et as-tu parfois rencontré des images que tu ne peux pas faire passer sous les 300 KB sans trop les dégrader avec ces logiciels ?
Merci encore pour tes recherches.
Salut Pierre,
Concernant le nombre d’images, je pense qu’il faut mettre autant d’images qu’il t’en parait nécessaire pour ton article (pertinence une fois de plus)… s’il te semble logique de mettre 15 images pour illustrer un article, vas-y. Si tes images sont optimisées ça ne devrait pas poser de problème. En plus dans votre cas, vous utilisez un plugin de lazy loading donc toutes ces images ne sont pas chargées avant que le lecteur scroll jusqu’à leur position (donc aucun soucis de ce côté la).
Pour ta 2ème question, ça va dépendre des dimensions de l’image. c’est claire qu’une image qui fait 5000px par 3000px fera plus de 300kb même compressée… mais tu n’affichera probablement pas de si tôt des images aussi grande sur votre site. WordPress créé plusieurs images de tailles différentes quand tu upload une image dans le CMS, ce sont celles-ci qui seront affichées (donc des version plus petites de la même image). Et ces images qui sont plus petites devraient faire moins de 300kb une fois compressées… Mais je vais revenir sur le sujet des différentes tailles d’images de wp dans notre prochain article 😉 … c’est un sujet un peu compliqué
Hello Benoît,
Merci pour ta réponse. On vient de télécharger le plugin et on est en train de travailler sur notre article sur les Maldives. Pour le moment, on a fait le test avec la photo titre. En effet, sur 2 PC différents, une fois le poids est de 329kb (rétina) et une autre fois à 39kb. Et en effet, là où elle est la plus lourde, c’est sur notre PC qui a une meilleure qualité d’écran (et plus moderne). Et sur le natel, elle est à 16kb.
Il y a juste un détail qui nous perturbe, c’est quand on fait “examiner l’élément” sur la photo (et d’autres dans l’article”, le code est terriblement long et prend plusieurs lignes. Ce qui n’était pas le cas avant. Est-ce normal ? Si non, devons-nous faire quelque chose en particulier ? Ou est-ce dû au fait que la photo “s’adapte” au type d’écran.
Merci beaucoup !
qu’est-ce que c’est l’url de l’article en question ?
C’est celui-ci : https://onholidaysagain.com/asie/maldives/voyage-maldives-activites/
(J’espère que tu sera fier de nous :-))
Et utilises-tu l’option payante supplémentaire “ExactDN” ? (Active le CDN et le redimensionnement automatique d’image pour s’adapter à vos pages. Support Retina, utilise WP Retina 2x pour de meilleurs résultats.” Dans l’onglet “Réglage de dimensionnement” ?
Merci
ahhhh oui 🙂 c’est nettement mieux! (et je vois qu’en général il y’a déjà bcp d’améliorations)
Pour l’option ExactDN, j’expliquerai en détail dans le prochain article quand et pourquoi vous pourriez avoir besoin d’un service comme celui-ci. Mais en l’occurrence, vous utilisez déjà photon (du plugin jetpack) qui s’occupe déjà de faire le même genre de service que ExactDN pourrait vous rendre. Cad que photon détecte vos tags images, regarde les attributs width et height et fournit une image qui fait exactement cette taille.
Salut Benoît!
Merci pour cet article qui aborde un sujet fondamental pour optimiser le temps de chargement. J’utilise ewww depuis pas mal de temps mais je n’ai pas encore passé la pas du “lossy”. Tu es en train de me convaincre!
Je me prend pas mal la tête sur cette question, notamment la taille des images. Je les charge en 1920 de large. Pour celles qui sont en pleine largeur c’est le minimum vital. Mais celles qui sont dans mes articles ne dépassent pas 1200 de large. Du coup je ne sais pas si je dois insérer en taille originale ou une miniature générée par wordpress à 1200 de large. J’inserai une miniature, mais sur certains écrans a grosse resolution ppir petit ecran (fhd et non retina) elles apparaissent floues…
Du coup j’ai remis en taille originale.
Aussi, utilises tu le chargement au défilement des images ? Histoire que tout ne se charge pas des le début, mais seulement quand on fait défiler?
Dernière question, que penses tu des services comme photon qui redimensionnent à la taille exacte d’affichage, mais servent les images depuis un serveur tiers?
Ça en fait des questions 😋
Salut Seb,
Alors pour le lossy j’espère te convaincre… nous on utilise le Maximum Lossy sur Novo-monde depuis un bon moment et je n’ai jamais eu une seule remarque sur la qualité des images. Et franchement je remarque une différence parfois dans les ciels mais c’est vraiment minime. Mais sinon pour le lossy, il n’y a pas moyen de faire la différence à l’oeil nu.
Concernant tes questions sur la taille (dimension) des images (et les services qui redimensionnent à taille exacte), j’y répondrai en détail dans notre prochain article (que je suis en train d’écrire car le sujet n’est de loin pas trivial)… ça sera plus clair et mieux synthétisé 🙂
Enfin, pour le chargement au défilement des images, j’ai mis ça en place sur novo-monde il n’y a pas longtemps (ce n’est pas encore parfaitement intégré avec les galeries notamment) et je ne suis pas convaincu à 100%. Même si ça a pas mal réduit la taille des pages (forcément) parfois sur mobile les images sont un peu lentes à charger pendant le défilement. Mais j’ai vu que c’est bien intégré sur votre site et en soit, le concept du “lazy loading” fait beaucoup de sens. Vous utilisez quel plugin ?
Ok ! Hâte de lire ce prochain article alors. Un gros morceau !
J’utilise bj lazy load sur notre site. Ça permet aussi de charger en différé d’autres éléments comme les iframes. Ce qui peut être mal mal pour les vidéos ou certains types de carte notamment.
D’ailleurs je suis en train de tester votre plugin de carto et c’est vraiment sympa, bravo !
J’ai oublié la moitié de ce que je voulais dire… Le lazy loading je suis également assez hésitant également. Car sur des connexions lentes, le chargement des images pendant le défilement peut être un peu pénible quand on veut aller en bas d’article pour les infos pratiques par exemple. Or tout l’intérêt c’est justement pour ceux qui ont une connexion lente… Mais d’un autre côté je me dis que niveau SEO, le fait que la page soit charger plus rapidement au début, ça doit plaire à Google. Donc je suis indécis…
Mais on compressant davantage les images, ça peut alléger un peu le soucis peut être et rendre l’expérience utilisateur convenable.
Le genre de dilemme qui me prend la tête, mais que j’aime bien creuser en même temps. Je dois être un peu maso.
n’hésite pas à nous faire un retour sur notre plugin de carte 😉
Il y’a une technologie assez récente (les IntersectionObserver) dont on discutait avec Laurent de OneChai, qui pourrait pas mal améliorer les plugins et scripts de lazyloading dans le futur… malheureusement, Safari ne supporte pas encore cette nouvelle techno. Donc je vais encore attendre un peu pour ça.
Mais sinon je te comprend bien… j’adore me creuser la tête sur ces questions 😉
Si jamais l’article sur les dimensions des images dans WordPress vient d’être publié par ici –> https://novo-media.ch/optimisation-web/responsive-image-wordpress/
Salut !
En revenant sur ton article, je me demandais le réel apport de ces plugins quand on passe par un logiciel genre photoshop ou lightroom pour traiter ses images. Quand on exporte, nous compressons déjà les images, du coup le gain doit être faible, voir nul si on compresse déjà bien via ces logiciels, non ?
Je viens de faire un petit test sur le site de tinyPNG et j’ai une compression entre 10 et 15 % meilleure que via lightroom. Mais peut être que je devrais simplement compresser un peu plus via lightroom. Faut que je teste. Ça m’éviterait de passer par ces plugins vu que de toute façon on édite nos photos.
Mais la vrai question, c’est pour les thumbnails. Est-ce que tu sais si les thumbnails générés à partir d’une image bien compressée sont eux mêmes optimisés ? Il y a un réel gain à utiliser ces plugins sur les thumbnails quand on a chargé une image bien compressée ?
Salut Seb,
Alors d’abord il faut que je mentionne que je n’utilise pas lightroom (qui ne fonctionne pas sous linux) donc je n’ai pas pu tester la qualité de sa fonction d’export pour le web. Mais de mon expérience avec les logiciels de retouche, ce n’est pas forcément une bonne idée de plus compresser dans le logiciel. Pour faire un comparaison, compresser plus dans le logiciel, c’est comme tailler ton image au marteau alors que d’utiliser un outil comme ewww ou smartpixel, c’est plus comme sculpter ton image au burin. Il existe d’ailleurs un plugin pour lightroom pour pouvoir utiliser tinypng directement dans lightroom. Ce que je veux dire c’est qu’à poids et dimensions égal, une image compressée par un logiciel de retouche sera moins belle visuellement qui si elle a été optimisée avec ewww ou smartpixel.
Sinon, comme les thumbnails sont créées par wordpress, même si l’image originale a été parfaitement optimisée, tu pourras certainement gagner encore du poids en les optimizant avec un des plugins.
Tu pourrais faire un test assez simple pour comparer. Tu insère une image compressée plus agressivement avec lightroom dans ta bibliothèque, puis tu installes le plugin shortpixel (car tu peux optimiser quelques images gratuitement avec ce plugin). Tu pourrais par exemple choisir la compression glossy ou lossy du plugin. Ensuite tu prend la même image mais compressée avec une meilleure qualité dans lightroom et tu insère cette image dans ta bibliothèque avec le plugin activé. Ensuite tu télécharges (via ftp) toutes les images qui ont été créées dans ton dossier upload pour comparer la qualité et le poids de toutes les images (thumbnails compris)
Bonjour et merci pour ce très bon post.
L’optimisation des images c’est bien mais ensuite il faut pouvoir les rendre responsive en fontion du viewport. Ces logiciels gèrent-il la distribution de la bonne taille en fonction du screen size ?
Sinon, en conseilles tu pour ce faire ?
Merci à toi pour ton travail !
Bonjour Christophe,
J’ai aussi écrit un article complet sur le sujet par ici –> https://novo-media.ch/optimisation-web/responsive-image-wordpress/
Re-bonjour Benoit ! (et oui, 2 commentaires en une seule soirée, on n’arrête pas le progrès)
J’ai bien lu que tu nous concoctais un article détaillé sur Ewww (déjà petite sous-question, une idée de quand tu pourras le publier ?), mais, comme tu le notes également, ils ont renommé les différentes options de compressions. La maximum Lossy semblait être la plus optimale, as-tu une idée “d’à quelle” version actuelle cela correspond aujourd’hui à tout hasard ? Pixel Perfect Plus, Premium ou Premium Plus ?
Une petite dernière, j’aimerais le mettre en place rapidement, la version “basique” à 0,003$/image suffit-telle pour déjà faire le gros du travail ? En attendant ta review sur les upgrades “Easy IO” et “ExactDN”. 🙂
Au plaisir,
Jérémy
Hey Jeremy,
Ahahah t’as bien raison de demander… J’aimerai bien te dire “bientôt” mais j’en ai aucune idée! Malheureusement ça me prend énormément de temps d’écrire ces articles mais j’espère pendant la 1ère moitié de l’année prochaine.
Sinon avec la nouvelle version j’utilise la compression Premium qui me convient bien et qui correspond environ à la maximum lossy de avant! Mais je ferais un test détaillé des différentes compressions dans l’article à venir. Sinon tu peux facilement faire le test toi même en ajoutant la même image dans ta bibliothèque et en changeant à chaque fois les settings du plugin entre deux. Tu pourras ainsi voir le poids et la qualité de l’image produite.
Mais oui si déjà tu optimises tes images avec ewww (à 0,003$ / image) et que tu utilises le plugin de lazy loading que je conseille, c’est déjà un bon début (remarque: wp rocket intègre aussi une fonction de lazy loading donc tu n’as probablement pas besoin de 2 différentes)