contact
contact
juin 5, 2021

Réduire ses images pour optimiser son site wordpress et booster le SEO.

Wouhou ! ça y est tu as créé ton site internet et il est enfin en ligne !

Ce qui est moins sympa, c'est qu'il est extrêmement long à charger...

Et si je te disais qu'il suffit de réduire ses images pour optimiser son site wordpress et lui permettre de s'afficher plus rapidement ?

Nous allons voir dans cet article comment diminuer la taille et le poids de tes images avant de les uploader sur ton site, puis quel plugin utiliser pour accélérer encore plus la vitesse de chargement de tes pages.

1. Pourquoi réduire ses images ?

A ton avis, qu'est-ce qui ralentit le plus l'affichage d'une page web ?

Allez, je te mets sur la piste : la réponse est dans le titre

Les photos ? Bravo ! 

Aujourd'hui, on sait que les images sont responsables de la moitié du temps de chargement d'une page.

De plus, avec l'évolution des technologies, tes lecteurs ont maintenant l'habitude que tout s'affiche très rapidement. Une page qui met plus de 2 secondes à s'afficher va leur sembler une éternité pendant laquelle ils auront tout le temps d'aller voir ailleurs. Et ce n'est certainement pas ça que tu cherches...

 

Ensuite, je te vois venir, tu vas me demander en quoi les images sont responsables de la lenteur d'un site.

Alors je t'arrête tout de suite : elles ne sont pas les seules responsables, mais les optimiser va significativement accélérer l'affichage de ta page.

Pour répondre à ta question, il faut savoir que les photos que nous prenons avec nos smartphones pèsent en moyenne entre 1 et 3 méga octets.

 

Ainsi, l'ensemble de cette page (textes, codes HTML, CSS et JavaScript, et images) pèse 2.90Mb dont 2.27Mb rien que pour les images !

Heureusement que je les ai optimisé un minimum...

 

En bref, pour optimiser la vitesse de son site, il faut réduire ses images : réduire le nombre d'images utilisées, et réduire leur poids (en jouant sur leurs dimensions et leur qualité).

2. Pourquoi optimiser son site WordPress ?

2.1) Faire vivre une expérience agréable à tes lecteurs

Oui, j'ai voulu reprendre les bases. En effet, on ne va pas s'amuser à redimensionner des photos juste pour le plaisir (enfin... sauf si vraiment ça t'amuse hein !)

Pour qu'un site web fonctionne bien auprès de tes lecteurs, il doit être agréable à naviguer. Et ça inclut plusieurs choses : le design bien sûr, la facilité de navigation à l'intérieur du site, et sa rapidité à afficher les informations.

Car un site moche qui s'affiche vite, c'est pas top. Mais un site avec un super design qui met 1 minute à afficher une page, c'est encore pire ! Dans ce cas-là, ton lecteur n'aura même pas pu lire l'information qu'il souhaitait et repartira de ton site probablement déçu...

2.2) Un meilleur référencement naturel (SEO)

Un site qui est réactif est mieux référencé. Et oui, les moteurs de recherche prennent également en compte la vitesse de chargement. En effet, un site plus rapide sera plus confortable pour le lecteur. Ce site sera plus apte à amener rapidement l'information que cherche le lecteur via les moteurs de recherche.

En bref, optimiser ton site va faire du bien à ton SEO !

Je vais même aller plus loin en disant qu'optimiser tes images, et donc ton site, est bon pour la planète 😉

Comment ça ? tu ne me crois pas ? Alors laisse-moi te donner quelques arguments :

  • espace de stockage moindre
  • moins de bande passante utilisée
  • moins de temps passé à attendre "pour rien" que ta page se charge

= économies d'énergie à tous les niveaux.

 

Maintenant que tu es convaincu de la nécessité d'avoir des images adaptées à ton besoin réel, passons aux choses sérieuses !

2.3) Quand optimiser son site Wordpress ?

Idéalement, il faut le faire à la création de ton site, puis à chaque fois que tu apportes des modifications : lorsque que tu décides d'ajouter de nouvelles photos à ton portfolio, ou lorsque tu ajoutes un article à ton blog par exemple.

En théorie, si tu as fait appel à un pro pour la conception / réalisation / intégration de ton site, alors UI et UX design sont créés pour attirer le client et fluidifier son cheminement sur ton site. Normalement, cette personne aura aussi optimisé le chargement de ton wordpress.

Mais là encore, dès que tu apporteras une modification à ton site, il faudra veiller à toujours utiliser des images dont la taille et le poids seront adaptées à ton besoin, et ne ralentiront pas le temps de chargement.

Tu l'as compris, optimiser ton site est un travail de fond.

3. Quelles sont les caractéristiques d'une bonne image ?

Malheureusement pour toi, il n'y a pas de réponse toute faite. Ou plutôt si, il y en a une : une bonne image est celle qui a le meilleur ratio qualité vs temps de chargement.

Ah ah ! ça t'avance bien hein ?

En fait, il y a plusieurs caractéristiques sur lesquelles jouer, et elles vont dépendre d'autres paramètres comme par exemple l'endroit où sera placé ta photo, sa visibilité, etc.

3.1) Les formats d'image

jpeg, png, svg, eps, webp... les formats d'images sont nombreux et tu t'y perds un peu ? C'est normal, mais on va débroussailler tout ça !

Pour simplifier, il y a 2 catégories d'images : les images vectorielles et les images matricielles.

 

Les images matricielles sont enregistrées essentiellement aux formats .jpg, .png et .psd

Ces images là se composent d'une multitude de petits carrés colorés, appelés pixels, répartis sur une matrice. Cette matrice contient un nombre fixe de lignes et de colonnes, donc un nombre fixe de pixels.

Ainsi, quand on agrandit une image matricielle, on agrandit en fait ces pixels. C'est pourquoi, en fonction de leur nombre et de leur densité (la résolution de l'image), on finit par distinguer ces carrés si l'on augmente trop la taille de notre image. Et c'est ce que l'on appelle alors une image "pixellisée"

Les photos sont des images matricielles, et il n'est pas possible de les convertir en images vectorielles.

 

Les images vectorielles sont quant à elles enregistrées essentiellement aux formats .eps, .svg, .pdf et .ai

Elles sont constituées de vecteurs : chaque point, chaque trait qui la composent est représenté par ses coordonnées dans un repère géométrique. Tu te rappelles tes cours de mathématiques au collège ? Abscisse et ordonnée ? ben là c'est à peu près pareil.

Leur avantage est de pouvoir être agrandies ou diminuées sans perte de qualité, les tracés seront toujours nets.

Si tu as des dessins, des schémas, des logos (en bref, n'importe quoi qui n'est pas une photo) alors privilégie le format .svg pour les enregistrer et les télécharger sur ton site.

En conclusion, on privilégie le vectoriel dès que c'est possible.

3.2) Les bonnes dimensions

Choisir les bonnes dimensions pour son image sera important pour les images matricielles (les photos) : sa hauteur et sa largeur exprimées en pixels/

Car tu l'as compris, si tu souhaites afficher une photo sur 1600 pixels de large alors que sa largeur initiale est de 800 px, alors il va falloir l'agrandir 2 fois et elle risque d'être floue ou pixellisée.

A l'inverse, si ta photo fait 1600px de large et que tu ne vas l'afficher que sur 800px, alors il vaut mieux la redimensionner avant, ce qui évitera d'avoir un fichier trop gros pour un rendu identique.

3.3) La qualité de l'image

Comme nous l'avons vu plus haut, ta photo et composée de pixels et l'on peut jouer sur leur nombre pour diminuer la taille du fichier-image.

Effectivement, une image qui se retrouve en partie cachée par du texte ou par un overlay (une couche colorée translucide qu'on vient mettre dessus) n'a pas besoin d'être en ultra haute définition. Au contraire, si tu veux mettre cette image en avant, alors tu choisiras une qualité supérieure.

Dans les paragraphes suivants, tu vas voir comment diminuer la qualité de ta photo sans que cela n'impacte ce que voient tes lecteurs.

4. Photopea, l'outil idéal pour optimiser ses images

Tu croyais que j'allais te laisser en plan avec mes explications toutes floues ? 

Que nenni !

Je vais te présenter maintenant une appli en ligne totalement gratuite qui est une sorte de Photoshop : photopea

On l'utilise habituellement pour de la retouche photo, mais aujourd'hui, on va uniquement s'en servir pour redimensionner, convertir et compresser tes images.

4.1) Comment redimensionner une image ?

Ici, nous allons voir comment modifier la hauteur et la largeur de ton image. Nous ne parlons donc pas de recadrage mais bien de redimensionnement.

 

Les appareils photo récents, ainsi que les smartphones, font des photos d'environ 4000 pixels de large par 3000 de haut.

Ce qui est énorme sachant qu'un écran de 15 pouces compte 1200 à 1900 pixels de large selon sa résolution, et qu'un smartphone sera aux alentours de 480px.

Tu peux donc sans aucun souci réduire ton image à une largeur de 1280px, et tu vas voir, son poids va automatiquement diminuer.

 

Tout d'abord, rends-toi sur le site de photopea.

Puis, clique sur Fichier -> Ouvrir, et sélectionne dans tes fichiers la photo que tu veux redimensionner. 

Ta photo s'affiche dans l'éditeur.

optimiser son site wordpress
Ma photo d'origine a été prise avec un réflex numérique :
- résolution = 350 ppp
- largeur = 4806 px 
- hauteur = 3456 px
- taille du fichier = 3.01 Mo (3 165 090 octets)

Maintenant, clique sur Fichier -> Exporter en tant que -> jpeg.

Une nouvelle fenêtre s'ouvre, et tu peux alors choisir les nouvelles dimensions de ta photo.

Pour conserver les proportions, pense à cliquer sur l'espèce de cadenas sur la droite.

Tu peux également voir en direct le nouveau poids s'afficher en bas à gauche.

pomilo photopea réduire image

Et voilà ! en réduisant la largeur de mon image par 3, j'ai ainsi divisé par 3 le poids de mon fichier.

Conclusion : la première étape pour réduire la taille du fichier, c'est de réduire les dimensions de l'image 😉

4.2) Comment compresser une image ?

On est contents, notre image est aux dimensions idéales pour l'utilisation qu'on va en faire.

Mais est-elle à la résolution optimale ?

Nous allons voir qu'il est possible de diminuer la résolution sans que cela n'impacte réellement la qualité perçue par notre oeil.

 

Pour cela, retournons dans photopea : en dessous des dimensions, tu as un curseur indiquant un pourcentage de qualité.

En diminuant ce pourcentage, tu diminue également le poids de ta photo. Et grâce à l'aperçu en direct, tu te rends compte facilement de la perte de qualité. 

pomilo photopea compresser image

Dans mon exemple, j'ai pu descendre à 75% de la qualité initiale sans qu'il n'y ait d'impact visuel. Et cela a divisé encore par 10 le poids de mon fichier !

 

Au final, ma photo est passé de 3 méga octets à seulement 97 kilo octets, soit 30 fois moins !

 

Regarde ci-dessous la comparaison entre 2 photos de mêmes dimensions mais de qualité différente : à gauche, la photo est à 100% de qualité et pèse 957 ko, à droite seulement 61.8 ko en descendant à 50% de qualité.

On peut voir une légère différence entre les deux images, et c'est pour cela que j'ai choisi de te montrer la dégradation à 50% et non celle à 75%.

Avant : 957 ko
pomilo comment réduire image avant
Après : 61.8 ko
comment réduire ses images pour optimiser son site

5. Peut-on aller encore plus loin dans l'optimisation de ses images ?

5.1) Les appli en ligne gratuites

Pour aller plus vite si tu as beaucoup d'images à compresser, tu peux utiliser des sites comme tinyPNG ou shortpixel.

Tous deux te permettent d'uploader plusieurs photos en même temps, et ils te proposent plusieurs type de compression : lossy (équivaut à une qualité d'environ 30%), glossy (50%) et lossless (75%). Une fois que toutes tes photos sont compressées, tu n'as plus qu'à les télécharger à nouveau sur ton PC puis les envoyer dans ta médiathèque WordPress.

5.2) Les plugins wordpress

Ahhhhhh ! les plugins, enfin on en parle !

Et ben oui mais non.

Utiliser des plugins en tous genres pour palier à la feignantise n'est pas une bonne idée. Pour la simple raison qu'ajouter un plugin à ton site wordpress va ajouter du code à charger, et donc ne pas toujours être bon pour la vitesse.

Aujourd'hui, je ne te conseillerai qu'un seul plugin d'optimisation : Phastpress.

Mais attention ! Le gros du travail doit se faire en amont, avant d'uploader tes images dans la médiathèque. Et Phastpress se chargera du reste, comme par exemple ne charger tes images que lorsque le lecteur arrive au passage concerné (c'est ce qu'on appelle le lazyload). Ceci permet au haut de ta page de s'afficher correctement sans avoir à attendre que toutes tes photos soient prêtes.

Conclusion

Pour optimiser ton site web et améliorer ton référencement naturel (SEO) commence par optimiser tes images :

  1. Utilise des images que si elles ont une réelle utilité
  2. Choisi le format adapté : .jpeg pour les photos et .svg pour les logos ou schémas
  3. Redimensionne tes images pour n'utiliser que ce qui sera utile selon la taille des visuels que tu veux afficher à l'écran
  4. Compresse tes images sans perte de qualité, ou avec une perte qui te semble raisonnable
  5. Télécharge dans ta médiathèque uniquement les images dont tu vas vraiment te servir et que tu as préalablement optimisées
  6. Fais du ménage régulièrement et supprime de ton wordpress toutes les images que tu n'utilises pas

Cet article t'a plu ?
Alors partage-le sur les réseaux !

Et si tu veux t'inscrire à ma newsletter, c'est ici !

Mentions légales
Tous droits réservés - pomilo.fr - 2021