Intégrer des images sur son site web est très simple, cependant si vous voulez éviter que votre site ne perde en vitesse vous devez les optimiser. Suivez ces 5 étapes pour exploiter au mieux le potentiel de vos visuels.
Choisir le bon format d’image
Pour que l’affichage de votre image soit optimal vous devez impérativement choisir le format en fonction de son utilisation.
Voici les différents types de formats web et leur spécificité :
- JPEG : Ce format est idéal pour les photos et illustrations complexes car il permet de gérer un large panel de couleurs : 16,7 millions. Il offre une excellente qualité et un poids optimal pour le web.
- PNG : Ce format est prévu pour les images transparentes et également celles disposant d’un maximum de couleurs comme pour le format JPEG. Le format PNG existe en 8 bits (256 couleurs comme le format GIF) et en 24 bits (plus de 16 millions de couleurs comme le format JPEG)
- GIF : Ce format est prévu pour gérer un maximum de 256 couleurs, il supporte la transparence et permet de gérer des animations simples.
Vous devrez donc dans un premier temps déterminer la nature de votre image (logo, photographie, icône, image animée…) pour ainsi choisir le bon format.
La qualité de ses images
Pour le web il n’est pas forcément indispensable de choisir des images de très haute qualité sauf si bien sûr vous désirez utiliser une image pour un fond d’écran.
Pour une image de petit à moyen format vous pouvez vous permettre de baisser la qualité en trouvant le bon équilibre entre la définition (nombre de pixels d’une image) et la résolution (exprimée en dpi, il s’agit de la densité de pixels d’une image) pour que celle-ci ne soit ni pixelisée, ni floue.
Optimiser le poids de ses images pour le web
Le poids de vos visuels est un élément très important pour le temps de chargement de votre site et également son référencement. Pour vous garantir un meilleur chargement de vos pages nous vous recommandons un poids égal ou inférieur à 100Ko.
Pour enregistrer vos images pour le web vous pouvez utiliser les logiciels Photoshop, Gimp ou encore Photofiltre.
Pour réduire le poids de votre image dans Photoshop suivez les étapes suivantes :
- Rendez-vous dans « Fichier » puis « Enregistrer pour le web »
- Choisissez le format souhaitez puis modifiez la qualité de l’image à l’aide du curseur (Exemple ci-dessous)
Pour réduire le poids de vos images il existe également des sites gratuits comme par exemple TinyPNG et JPEGmini.
Adapter la dimension de ses images pour son site web
La dimension de vos images est un élément à ne pas négliger. Il est important de choisir dès le départ la bonne dimension afin d’optimiser au mieux l’affichage de vos images sur tous les types de support (smartphone, ordinateur, tablette).
Vous donnerez ainsi un rendu plus professionnel à votre site et offrirez une meilleure expérience utilisateur à vos internautes.
Ajouter une description pour optimiser ses images
Avant toute importation sur votre site web pensez dans un premier temps à renommer vos images avec des mots-clés pertinents.
Dès l’importation vous avez la possibilité d’attribuer un titre à votre image (attribut title : le texte s’affichera dès le passage de la souris) et de renseigner le texte alternatif (attribut alt : pour les moteurs de recherche).
Les textes sont des éléments importants aussi bien pour vos lecteurs que pour les moteurs de recherche. Vous avez également la possibilité d’ajouter une légende à vos images ainsi qu’une description qui permettront d’optimiser encore davantage votre stratégie SEO.