La présence d’images sur un site internet est primordiale pour capter l’attention et séduire les internautes. Mais optimiser les images pour le web est tout aussi important pour vos utilisateurs, cela jouera notamment sur le temps de chargement de vos pages. En janvier 2022, les images représentent en moyenne 23% du poids total d’une page internet (selon httparchive.org), après les vidéos, les poids lourds du web.
Le but dans l’optimisation des fichiers photos est de réduire leur poids afin qu’ils deviennent le plus léger possible sans altérer la qualité de l’image. Les principaux avantages vont être :
- L’amélioration de la vitesse de chargement de votre site.
- L’amélioration de l’expérience utilisateur. Les images sont importantes aux yeux des internautes, si vos images chargent lentement, vos visiteurs s’avéreront moins susceptibles de s’engager avec votre contenu.
- L’amélioration du référencement de vos pages. En effet, un chargement rapide, particulièrement sur mobile, offrira un meilleur référencement. Les balises textuelles de vos images doivent également être complété, ce sont ces éléments qui sont lus par les algorithmes de SEO.
- La réduction de l’espace de stockage et de l’utilisation de la bande passante. En réduisant le poids de vos images, votre site utilisera moins de bande passante, vous économiserez sur les coûts d’hébergement et de diffusion du contenu.
Mais comment optimiser les images pour le web ?
Choisir le bon format d’images
Sur le web, on retrouve généralement 4 types d’images : PNG, JPG, GIF et SVG. Les trois premiers formats sont des formats matriciels (bitmap), les images sont composées de pixels que l’on voit habituellement sous forme de carré lorsque l’on souhaite zoomer à l’intérieur. Le format SVG est quant à un lui un format vectoriel, composé de lignes de segments liés par des formules mathématiques. Chaque élément a une place bien définie, permettant de les modifier à volonté sans les altérer.
JPG : Ce type d’images est idéal pour les photographies et les images détaillées et peut facilement être compressé pour réduire considérablement sa taille.
PNG : Ce format est adapté pour les images avec de la transparence ou semi-transparence. Mais il est à éviter pour les images aux grands formats.
GIF : Les GIF sont utilisés pour les images animées, mais supporte également les images fixes. Les animations sont créées à partir d’une suite plus ou moins rapide d’images. Ce format ne gère pas au mieux la transparence, mais la supporte. Il faudra par ailleurs éviter les photos haute définition ou avec plus de 256 couleurs.
SVG : adapté aux éléments graphiques comme les logos, les icônes, etc. Ils sont particulièrement légers, s’adapte à n’importe quelle taille sans pixellisation. Mais ce format ne convient pas aux images détaillées.
Afin de convertir vos images, vous pouvez utiliser des outils comme Photoshop, ou bien optimiser les images pour le web en ligne sur des sites dédiées comme online-convert.com.
Réduire le poids de vos images
Une fois que vous avez trouvé le format adapté pour votre image, nous allons nous intéresser au poids de celle-ci.
Le premier élément à vérifier sur vos images sera la résolution. Un écran possède généralement une résolution de 72 dpi. Il sera donc inutile d’avoir des images ayant une meilleure résolution, votre écran ne sera pas capable de mieux les afficher, mais elles seront plus lourdes et donc plus longues à afficher, car elles possèdent une concentration d’information plus importante.
Les différentes tailles d’images jouent également un rôle important pour son poids. Penser à redimensionner vos différents fichiers à la grandeur utilisée sur votre site. Vous n’avez pas besoin d’une image de 3000 px si elle ne sera que de 100 px sur votre site. Pour optimiser la taille d’une image, il est préférable de les redimensionner à l’aide de logiciel ou outils en ligne avant de les uploader sur votre site, plutôt que de laisser le code CSS les redimensionner.
Vous pouvez aussi compresser vos images afin de réduire leur taille. La compression va permettre de réduire la redondance des données d’une image et de ce fait réduire l’espace qu’elle occupe. Cette compression peut être avec perte ou sans perte de données correspondant à une perte de qualité ou non de l’image.
La première étape de l’optimisation consiste à travailler les images avant de les mettre sur le web. Vous pouvez faire cela avec des outils en ligne avec des outils comme compressnow.com ou iloveimg.com, mais c’est également possible d’optimiser une image pour le web avec Photoshop en utilisant la fonctionnalité Fichier > Enregistrer pour le web. Vous pourrez alors choisir le format de votre image, sa taille et son taux de compression.
Dans un deuxième temps, l’optimisation se fait sur le serveur avec des logiciels de compression. Il en existe plusieurs directement intégrés à votre CMS comme ici avec WordPress.
On peut citer le plugin WordPress : Imagify qui vous permettra d’optimiser vos images directement depuis votre site. Le plugin Shortpixel Image Optimiser est également une alternative pour vous aider dans le traitement de vos images web.
Penser au référencement
Optimiser les images pour le web, c’est aussi penser au référencement naturel de votre site. Les images et le code englobant ces images sont analysés par les moteurs de recherche, un bon référencement naturel de vos images servira de levier SEO puissant.
Tout d’abord, vos images doivent être en lien avec le contenu, cela parait logique, mais la cohérence au sein de votre page a son importance pour le référencement naturel.
Ensuite, pensez à renommer vos images. En effet, il faut éviter de laisser vos images au nom généré automatiquement (comme IMG76009), optez plutôt pour un nom optimisé SEO, pour augmenter vos chances d’apparaitre lors des recherches des internautes.
Un des éléments les plus importants pour le référencement naturel, en parallèle du nom de l’image, sera l’attribut alt ou le texte alternatif de votre image. Il est important de compléter cette balise, avec notamment les mots clés de votre page. Cela permettra au moteur de recherche d’avoir plus de précision sur le contenu de l’image, de rendre votre site accessible à tous et spécifiquement au mal-voyant, et permet de s’assurer qu’un contenu sera écrit à la place de l’image si elle ne parvient pas à charger.
Vous pouvez également prendre l’habitude de toujours accompagné vos images d’une légende. Elle n’a pas d’effet direct sur le référencement naturel, mais influencera l’expérience utilisateur de vos visiteurs.
Bien sûr, la taille et le poids de l’image vont jouer un rôle sur le référencement de la page avec l’analyse des performances du site (les Webperf) faite par les moteurs de recherche. Comme évoqué précédemment, il vous faudra maitriser la taille et le poids de vos images pour ne pas alourdir votre site et réduire ses performances. (On vous en dit plus si vous souhaitez optimiser la vitesse de votre site sur WordPress).
Adoptez cet automatisme d’optimisation !
Une fois que vos techniques d’optimisation de vos images sont fonctionnelles, votre site sera aimé des navigateurs, des moteurs de recherches et des réseaux et bien évidemment de vos visiteurs qui profiteront de votre site avec un temps de chargement réduit et un meilleur classement sur les moteurs de recherche. Cette tache peut vous paraitre chronophage au départ, mais elle devient rapidement un jeu d’enfant. C’est un automatisme à avoir !
Pour vos projets de site internet, faites appel à des professionnels. Contactez Webalia.
