Comment optimiser les images de son site web ?
Vous est-il déjà arrivé de vous rendre sur un site internet dont le temps de chargement était tellement long que vous en êtes parti avant même l’affichage de la page ? Avez-vous déjà vécu l’expérience de cette magnifique image qui s’affiche progressivement, que vous découvrez ligne par ligne ?
Vous souvenez vous de cette photo qui avait l’air magnifique et que vous n’avez jamais vue en entier ? Cette expérience qui, à chaque fois, vous rappelle douloureusement la bonne vieille époque de la connexion internet avec un modem téléphonique alors que vous disposez aujourd’hui d’une connexion fibre ou 4G !
Vous serez surement d’accord, ce genre d’expérience est non seulement désagréable pour les visiteurs de votre site, mais également dommageable pour l’image de votre blog ou de votre entreprise. Heureusement, nous allons vous expliquer comment optimiser les images de votre site afin qu’elles s’affichent désormais à la vitesse de la lumière.
Pourquoi optimiser ses images web ?
Optimiser ses images pour le web offre plusieurs avantages. En effet, disposer d’un site internet contenant des photos de bonne qualité et qui se chargent rapidement, contribue à améliorer l’expérience de lecture des visiteurs de votre site. Dans le cas d’un site vitrine, des images bien choisies et optimisées aident à laisser à vos visiteurs une bonne impression et peut les rassurer sur votre professionnalisme. Dans le cadre d’un blog, des illustrations permettent de toucher, porter de l’émotion et améliorent la lecture… à condition qu’on puisse les voir.
Car, les images représentent une grosse partie du temps de chargement d’une page web. C’est pourquoi, leur optimisation est un enjeux crucial pour votre site web. En effet, en améliorant leur temps d’affichage et par ricochet la vitesse globale de votre site, vous améliorerez le taux de rebond de vos pages web et favoriserez le retour des internautes sur votre site.
Enfin, comme nous allons le voir, l’optimisation des images ne se limite pas à la diminution de leur taille. Car la notion d’optimisation peut également toucher des aspects de l’accessibilité aux personnes mal voyantes, l’adaptabilité en fonction du support de consultation et l’optimisation sémantique utile au référencement de votre site web.
Voyons donc, ensemble, comment vous pouvez optimiser vos images sur ces différents aspects.
Redimensionner vos images pour en diminuer la taille
Les appareils photo disposent tous aujourd’hui de capteurs qui permettent de prendre des clichés en haute résolution et proposent des tailles d’image gigantesques, et donc volumineuses. Très souvent, les photos dépassent les 10 000 000 de pixels et leur largeur par défaut est supérieure à 3000 pixels. Si la qualité est exceptionnelle et se justifie pour des utilisations d’impression papier grand format, une telle résolution est totalement inadaptée à l’affichage sur un site web. En effet, la résolution de la majorité des écrans utilisés pour la navigation web dépasse rarement les 1920 voire les 2440 px de large. A titre d’exemple, le nombre de pixels affichés sur la largeur d’un écran de smartphone avoisine les 400.
C’est pourquoi, la première chose à faire pour optimiser vos images web est de les redimensionner. Vous pouvez réduire la taille d’une photo très simplement avec un outil graphique gratuit comme Gimp par exemple (menu image > échelle et taille de l’image) ou des outils d’édition d’images en ligne. Notez que le gain en termes de poids sera proportionnel à la réduction de taille appliquée à votre image.
Choisir un format d’image adapté
Un autre élément qui peut jouer sur l’optimisation de l’affichage d’une image destinée à être visualisée sur un site web est le format d’enregistrement de cette dernière. Au même titre que modifier la taille d’une l’image, opter pour un format adapté au web permet de diminuer considérablement le poids de l’image tout en conservant sa qualité perçue à l’œil nu sur les supports numériques. Le format utilisé pour une image est reconnaissable grâce à l’extension du fichier. Il existe plusieurs formats d’image qui peuvent être utilisés pour le web. Parmi eux, les formats gif, jpg, jpeg et png ont été longtemps les plus répandus. Aujourd’hui des formats spécifiques au web sont poussés par les moteurs de recherche, à l’image du format webp optimisé pour l’affichage web.
Là encore, la plupart des outils d’édition graphiques vous permettent en quelques clics de convertir votre image ou votre photo dans un autre format. La fonctionnalité est généralement aussi simple que la fonction enregistrer sous. Avec l’outil graphique Gimp, par exemple, il vous suffira d’aller dans le menu « fichier » puis « Exporter sous » et sélectionner votre format d’export.
Si vous ne voulez pas installer d’outil spécifique, vous pourrez trouver facilement des convertisseurs d’images gratuits en ligne. Leur mode de fonctionnement est généralement similaire. Pour convertir votre image dans un autre format, il vous suffira généralement de choisir le format d’entrée et de sortie et de faire glisser l’image dans la zone de l’interface de la page web indiquée.
Notez que la conversion d’une image dans un autre format peut vous permettre de diminuer son poids de 60 à 90%.
Compresser vos images en affinant les paramètres d’export
Lorsque vous avez modifié la taille de votre image et que vous avez sélectionné un format plus adapté à l’affichage sur un site web, il est possible d’optimiser encore vos images en jouant sur les paramètres de compression du format sélectionné. Le principe ici est de dégrader l’image de sorte que son poids soit réduit sans que cela affecte la perception visuelle de celle-ci ; ou, de manière imperceptible. Évidemment, plus une photo est compressée, plus la palette de couleur est réduite et moins les détails sont visibles. Néanmoins, là encore, optimiser les paramètres de compression de votre image peut vous faire gagner entre 50 et 75% de sa taille.
Servir une image différente en fonction du support numérique
Une autre technique qui permet d’optimiser la vitesse de votre site et le rendu de vos images consiste à créer des images adaptatives. Le principe consiste à mettre à disposition du navigateur plusieurs images adaptées aux différents supports d’affichage. Ensuite, vous devez déterminer des règles de sélection de l’image à récupérer et afficher en fonction de la taille d’écran du navigateur. Ces règles peuvent également vous permettre de modifier la résolution de l’image affichée.
Pour cela, vous devrez vous appuyer sur les possibilités des attributs spécifiques à la balise image du langage HTML ou CSS (scrset, media et size) comme expliqué ici.
Optimiser le transfert des images de votre site web
A ce stade, vos images web ont une taille optimisée, elles ont atteint un poids et une qualité optimale et vous savez les adapter au support d’affichage web. Et pourtant, vous pouvez encore faire mieux en optimisant leur transfert. En effet, un autre moyen d’accélérer l’affichage de vos images et de les faire parvenir plus vite au navigateur. Pour améliorer la vitesse de chargement de vos images web, vous allez demander au serveur web de compresser vos photos ou illustration pour leur transfert vers le navigateur de l’internaute.
Le principe est le suivant : une fois l’option activée, le serveur compressera les images à envoyer pour afficher vos pages web dans un format proche du zip (gzip). Le navigateur se chargera de décompresser la photo ou l’illustration envoyée. Cette opération est transparente pour l’internaute. Néanmoins, elle permettra à votre site de transférer des images moins lourdes. Ainsi, vous économiserez la bande passante nécessaire à l’affichage de votre image, et accélérerez, par là même, le chargement de votre page web.
Pour activer la compression gzip de votre serveur web, il vous faudra modifier le fichier htaccess de votre site. Attention : ce fichier est sensible, veillez à bien en faire une sauvegarde avant.
Optimiser une image pour le référencement web et l’accessibilité de vos pages
La notion d’optimisation d’images est souvent synonyme de réduction de taille et de diminution du nombre de Mo ou de Ko. Néanmoins, on peut également vouloir optimiser une image pour faciliter son accessibilité ou améliorer son référencement web.
Pour optimiser une image à des fins de référencement, vous pouvez jouer sur : son poids, son format et son adaptabilité (sujets que nous avons déjà abordés) ainsi que des caractéristiques sémantiques tels que : son nom, ses metadonnées ou encore les attributs mis à disposition par la balise Html img (alt et title). De la même manière, vous pouvez également assortir votre image web d’une légende avec les nœuds <fig> et <figcaption>.
Résumé et conclusion
Comme nous l’avons vu, vous pouvez utiliser différentes techniques pour optimiser une image pour le web. Dans tous les cas, vous pouvez :
- diminuer sa taille,
- choisir un format adapté au support d’affichage auquel votre photo ou votre illustration est destinée.
- Jouer sur les paramètres de compression du format choisi afin de trouver le meilleur compromis entre le poids et la qualité visuelle de l’image.
Dans le cadre d’une image web à optimiser pour un site internet vous pouvez également :
- Utiliser un format d’image conçu pour le web type webp
- Utiliser les options de compression gzip proposées par votre serveur web
- Mettre en place des images adaptatives
- Choisir un nom d’image en rapport avec votre contenu et les mots clés visés
- Renseigner les métadonnées de vos images
- Remplir les attributs HTML de l’image pour améliorer son accessibilité à l’aide d’éléments signifiants.
En appliquant toutes ces astuces, vous verrez que vos images s’afficheront à la vitesse de la lumière. Vous disposez désormais de toutes les informations utiles pour commencer à améliorer le poids de vos images, leur accessibilité et leur référencement. Comme vous le verrez, la majorité de ces optimisations est relativement simple à mettre en place. De plus, il existe de nombreux outils pour optimiser vos images en ligne pour vous aider. Maintenant, à vous de jouer !
