Menu
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é).
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...
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 :
= é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 !
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.
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.
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.
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.
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.
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.
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 😉
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é.
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%.
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.
Tu peux aussi utiliser squoosh.app (qui est mon chouchou depuis que je l'ai découvert, je ferai un article dessus un de ces quatre !)
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.
Pour optimiser ton site web et améliorer ton référencement naturel (SEO) commence par optimiser tes images :
