Comment optimiser les images de son site web
Optimiser les images de son site web fait partie d’une des priorités lors de la conception de ce dernier. Pourtant, cette étape est souvent négligée. Des images non optimisées jouent fortement sur les performances de votre site, et déplaisent encore plus à Google. Pour éviter ces désagréments, il existe des techniques permettant de réduire la taille de vos images sans trop en altérer la qualité et d’optimiser les images pour votre site.
Table des matières
1. Optimiser ses images: les avantages
La rapidité est l’avantage principal de l’optimisation des images. En travaillant vos images pour les intégrer à votre site internet, vous permettez aux moteurs de recherche de découvrir et d’analyser vos pages plus rapidement. Au contraire, si elles ne sont pas travaillées ou sont trop lourdes, elles dégradent vos performances et conditionnent un temps de chargement très lent.
94% des sites présents sur la toile chargent en 0,8 secondes en moyenne. Et nous sommes 47% à vouloir patienter moins de 2 secondes pour voir s’afficher une page sur laquelle on a cliqué.
Optimiser ses images, c’est aussi s’assurer de garder l’utilisateur et de ne pas le perdre avant même que notre page s’affiche ! C’est lui offrir un parcours agréable et fluide en améliorant l’expérience utilisateur.
Autre avantage, en choisissant soigneusement les mots-clés qui vont servir aux titres, aux légendes ou aux attributs alt (descriptions textuelles de l’image), vous allez favoriser votre référencement. Vos images seront mieux classées par Google qui les interprétera plus facilement et vous permettra de gagner de la visibilité. Elles pourront apparaître dans Google Images et apporter plus de trafic.
Enfin, travailler vos images vous permettra de gérer l’espace de stockage dont vous disposez en ne le saturant pas inutilement.
2. Images, photos: où trouver les visuels
Le mieux reste d’avoir ses propres visuels représentant son activité, ses produits et quelques photos de soi pour se présenter. Une bonne photo prise par vos soins sera toujours beaucoup plus parlante, personnelle et authentique qu’une image prise dans une banque d’image.
Mais dans le cas où vous ne pouvez, ou ne voulez tout simplement pas utiliser vos photos personnelles, il existe de nombreuses banques d’images, gratuites ou payantes, où vous pouvez piocher des images pour illustrer votre site web. Je vous en présente quelques-unes.
a. Les banques d’images gratuites
Pixabay propose une immense bibliothèque d’images. Elles se comptent par milliers et sont extrêmement variées. Vous pouvez y trouver des photographies, des dessins, des images vectorielles, des vidéos, des illustrations… Cela permet de varier le contenu de son site en disposant des images, mais aussi des dessins ou des icônes en arrière-plan pour habiller votre site. Pixabay dispose d’un système de recherche dans lequel vous pouvez filtrer selon vos besoins: orientation, taille, type, couleur, catégorie…
Unsplash est également une banque d’images qui propose énormément de contenu avec une qualité en haute résolution. Contrairement à Pixabay, Unsplash ne fournit pas d’illustrations, de dessins ou d’images vectorielles mais se concentre sur des photographies travaillées et de très bonne qualité. Les images sont totalement libres de droit pour une utilisation personnelle ou commerciale. Vous pouvez effectuer une recherche sur un mot-clé, et l’outil vous proposera des catégories correspondantes afin de préciser au maximum votre recherche. Vous trouverez forcément de quoi remplir votre site internet.
Pexels est une troisième banque d’images gratuite qui propose également des photographies en haute définition. Les photos varient de l’artistique au classique et couvrent un champ de mot-clés assez conséquent. Pexels dispose aussi de vidéos libres de droits que vous pouvez télécharger gratuitement, sans vous inscrire.
b. Les banques d’images payantes
Shutterstock est certainement la banque d’images payantes la plus connue. Outre la qualité, la quantité est impressionnante. En effet, vous elle propose pas moins de 315 millions de contenus. Vous pouvez y trouver des photographies, des vidéos, des images vectorielles et bien d’autres ! La plateforme propose un système d’achat ponctuel ou un système d’abonnement comprenant un quota mensuel de crédits ou de téléchargements. Shutterstock se renouvelle sans cesse en ajoutant plus d’un million de contenus chaque semaine.
Adobe Stock est une autre plateforme d’images qui contient plus de 337 millions de contenus divers : images, vecteurs, vidéos, illustrations, templates, etc. Elle provient de la franchise Adobe. Réputée dans le monde entier, vous pouvez y avoir libre accès si vous détenez un abonnement Creative Cloud. Sinon, la plateforme propose des tarifs avec un excellent rapport qualité-prix, sous forme de forfaits ou de crédits. Elle est l’une des meilleures banques du marché.
iStock by Getty Images est une banque d’images qui privilégie la qualité à la quantité. En effet, les images proposées sont d’une qualité supérieure à ses concurrents. Ce sont généralement des professionnels ou des grandes entreprises qui utilisent cette plateforme. Et pour cette raison, les tarifs sont plutôt orientés vers ces derniers avec un système d’abonnement mensuel ou annuel.
3. Optimiser ses images: comment s'y prendre ?
Optimiser ses images pour le web n’est pas aussi compliqué que l’on pourrait le penser. Le plus gros du travail consiste à diminuer drastiquement le poids des images ou photographies que vous voulez utiliser. Dans l’idéal, la taille d’une image ne devrait pas dépasser les 200Ko en général. Pour arriver à ce résultat, il est nécessaire de passer par trois étapes.
a. Choisir le bon format
Le choix du format est une étape importante dans la réduction du poids des images. En effet, chaque format possède ses avantages et ses inconvénients et est adapté à un certain type d’images.
JPEG (ou JPG) – C’est le format d’image le plus utilisé et le meilleur rapport qualité/poids pour un fichier. Le JPEG permet de coder 16 millions de couleurs différentes, ce qui est largement suffisant pour vos images. Par contre, ce format ne permet pas de gérer la transparence. Il est parfait pour vos photographies en offrant une qualité suffisante sans trop affecter le poids.
PNG – Ce format offre une qualité d’image supérieure au JPEG. Cependant, le poids de l’image en est rapidement affecté. Ce format est parfait à utiliser pour des logos, des images simples, avec peu de détails, de couleurs. A éviter pour des photographies professionnelles. Contrairement au JPEG, il permet d’utiliser la transparence, ce qui est souvent utile pour un logo par exemple.
SVG – C’est un format de fichier vectoriel. Son gros avantage est de pouvoir être redimensionné sans altérer la qualité de l’image. Contrairement aux autres formats qui contiennent des pixels, le format SVG contient essentiellement des morceaux de code et les convertit en pixels à l’affichage. Le format tend à se populariser mais reste encore méconnu pour le moment.
GIF – Ce format s’utilise pour les images animées mais ne permet l’utilisation que de seulement 256 couleurs.
Il existe d’autres formats (comme le WebP) mais ils ne sont pour l’instant pas supportés par tous les navigateurs. Il est donc préférable de rester sur les valeurs sûres pour le moment.
Pour résumer, utilisez le format JPEG pour des photographies ou images avec beaucoup de couleurs, le format PNG pour des images simples, le format SVG pour des logos, icônes ou graphiques et le format GIF pour des images animées.
b. Réduire les dimensions
Les photographies ont souvent une grande taille qui joue fortement sur le poids de l’image. Lorsque vous téléchargez des images dans des banques d’images par exemple, on vous propose de choisir la taille (petite, moyenne, grande ou originale). Certaines tailles originales peuvent être vraiment immenses.
La majorité des écrans possède une résolution de 1920*1080 pixels. C’est pourquoi il n’est pas nécessaire d’avoir une taille excédant cette résolution.
Le mieux reste d’adapter vos images à vos conteneurs. Si votre section fait 700*500px, inutile d’utiliser une image dépassant ces mesures.
Pensez donc à adapter et réduire vos images en fonction de leur utilisation afin de diminuer le poids de ces dernières.
Pour ce faire, vous pouvez directement utiliser la visionneuse Windows en ouvrant votre photo et en cliquant sur “Redimensionner l’image” ou bien “Modifier l’image”. Avec cette dernière option, la visionneuse vous permet de choisir un format préétabli (Carré, 16:9, 4:3, etc.) ou un format libre à dimensionner vous-même.
Vous pouvez également vous servir d’un logiciel de retouche photo comme Gimp ou Photoshop ou trouver facilement des outils en ligne.
c. Compresser les images
Compresser une image, c’est tout simplement réduire son poids sans toucher à sa taille l’écran, ses dimensions.
Le poids d’une image se mesure en kilo-octets (Ko) ou en méga-octets). Pour rappel, dans l’idéal, une image destinée à être mise en ligne sur un site web ne devrait pas dépasser les 200Ko. Rappelez-vous, plus le poids est faible, plus la vitesse de chargement de cette dernière sera rapide.
Ainsi, si vous choisissez le bon format pour votre image, que vous réduisez ses dimensions et que vous la compressez, vous pourrez souvent gagner jusqu’à 80% de diminution de son poids. Vous réduirez de ce fait l’espace de stockage que votre fichier occupera.
Des logiciels de retouche photo peuvent vous permettre de compresser vos images, ou vous pouvez simplement utiliser des outils en ligne comme JPGCompressor.
4. Optimiser ses images pour le référencement
L’optimisation des images a un impact direct sur le référencement. Nous venons de voir que les fichiers volumineux ralentissent votre site, ce qui n’est pas apprécié par les moteurs de recherche qui peuvent vous pénaliser pour ça. De plus, Google et les autres moteurs de recherche, n’interprètent pas seulement les textes de votre site web mais également les illustrations de ce dernier. Voici deux astuces pour bien vous faire voir des moteurs de recherche.
a. Nommer ses images
Il ne faut pas négliger le nom que l’on donne à ses images. Je vois souvent des images nommées “IMG01” ou “IMG45221”, ce qui a un impact très négatif sur le référencement naturel. En effet, les moteurs de recherche vérifient les noms !
Alors pensez à bien nommer vos images. Il est important de leur donner un nom clair, pertinent et explicite. Par exemple, si votre image illustre une recette de tarte à la tomate, nommez-la “recette-tarte-tomate.jpg”.
En ce qui concerne la mise en forme, séparez tous les mots par des tirets, cela facilitera l’identification du nom par les moteurs de recherche. N’utilisez pas d’accents, ni de caractères spéciaux et évitez les majuscules. Préférez un nom court, entre 2 et 5 mots. Enfin, bannissez l’utilisation des articles: “recette-de-la-tarte-à-la-tomate” devient “recette-tarte-tomate”.
Dernier point, et pas des moindres: intégrez dans le nom de votre image le mot-clé traité dans votre contenu. Cela sera très utile pour le référencement qui se verra amélioré.
b. L'attribut alt
L’attribut alt est un texte alternatif qui va s’afficher si votre image ne se charge pas correctement. Il s’agit d’une description textuelle de l’image. Cela permet d’apporter des précisions aux utilisateurs qui ne voient pas l’image.
A l’origine, cet attribut est destiné aux personnes malvoyantes. Lorsqu’elles naviguent sur internet, leurs navigateurs sont conçus de manière à lire oralement ce qu’elles devraient percevoir.
Aujourd’hui, tout comme pour le nom des images, l’attribut alt est devenu indispensable pour l’optimisation de votre référencement naturel. Bien écrit, il va permettre aux moteurs de recherche d’établir un lien entre l’image et le contenu.
Pour rédiger l’alt, pensez une nouvelle fois à votre mot-clé. C’est l’occasion de l’y insérer. Reprenons notre exemple de la tarte à la tomate. Si votre photo représente une tarte en train de cuire dans le four, votre balise pourrait être “cuisson de la tarte à la tomate au four”.
Étant donné que le texte est destiné à être lu, vous pouvez, contrairement au nom, utiliser les majuscules, les espaces et les accents.
Optimiser les images pour son site web est essentiel pour ne pas détériorer ses performances. En suivant les techniques présentées dans cet article, vous améliorerez donc ces dernières comme le chargement ou la vitesse d’exécution. Et Google restera votre allié !
Maintenant que vous savez comment optimiser vos images, jetez un œil à ce guide en 7 étapes pour créer une page d’accueil efficace pour votre site web.
Passionnée par le développement web, mon but est de comprendre et d’analyser vos besoins au mieux afin de réaliser le site qui vous correspond.
Ensemble, construisons le site qui vous ressemble pour atteindre vos objectifs et développer votre présence en ligne au plus proche de votre idéal.
Laurie
