Comment optimiser ses images pour le web

Comment optimiser ses images pour le web

Les photos prises avec un téléphone, ou les photos de banques d’images sont bien trop larges pour le web. Avant de les uploader sur un site, il faut les « optimiser ».

Optimiser vos images pour le web est crucial car cela a un impact sur le temps de chargement de votre site, l’expérience utilisateur (UX) mais aussi le référencement (SEO).

Qu’est-ce que l’optimisation d’image ?

L’optimisation des images pour le web consiste à réduire autant que possible la taille de fichier des images sans sacrifier la qualité, afin que le temps de chargement de vos pages reste court. Optimiser les images est aussi utile pour le référencement sur Google Images et d’autres moteurs de recherche d’images.

Suivez le guide!

1. Choisir le bon format d’image

Le choix du bon format pour votre image est important car il affecte la qualité de l’image et la vitesse de votre site.
Les trois formats d’images les plus couramment sur le web sont :

  • JPEG – JPEG est le format préféré dans la majorité des cas en raison de sa taille de fichier plus petite et de sa haute qualité pour les photos et les images avec beaucoup de couleurs.
  • PNG – Moins léger que le JPG, Le format PNG fonctionne mieux avec des images en couleur limitées telles que des graphiques d’icônes, dessins au trait et graphiques tels que les logos. Ce format a l’avantage de supporter la transparence.
  • GIF – ce sont des images animées. À utiliser avec parcimonie car le poids des fichiers GIF animés est souvent important.

La règle de base pour choisir le bon format: JPEG pour les photos, PNG pour les logo, images à fond transparent, texte ou couleurs unies.

2. Utiliser les bonnes tailles d’images

La dimension des images influe grandement sur la taille du fichier, donc sur la rapidité de chargement de votre page.
En règle générale, une taille de 1200 px est amplement suffisante et cette dimension satisfait la plupart des thèmes WordPress.

3. Compresser les images et conserver un poids inférieur à 150kb

Plus le poids d’une image est grand, plus son téléchargement prend du temps et ralentit le chargement de vos pages, ce qui impacte non seulement l’expérience utilisateur, mais également le SEO (référencement naturel) de votre site. Chaque image que vous téléchargez sur votre site web doit être compressée pour réduire sa taille globale sans affecter sa qualité.

En règle générale, visez un poids inférieur à 150kb.

Outils pour compresser les images

Les sites gratuits tels que TinyPNG, et Squoosh permettent de compresser et redimensionner les images.

4. Optimiser les images pour le référencement (SEO)

Utiliser des noms de fichiers descriptifs

Le nom de votre fichier (image, vidéo..) joue un rôle sur votre référencement dans Google Images. Ne pas utiliser les noms de fichier génériques du type IMG12345.jpg , nommez-le avec les mots-clés en rapport avec votre contenu.
Ex: « camping-sud-ardeche.jpg »

Les règles à retenir:

  • Ne pas utiliser d’accents (à, é, è..) ni de caractères spéciaux ( !,@, /…).
  • Pas de majuscules.
  • Utiliser des tirets (-) pour séparer les mots. Surtout pas d’espace entre les mots.

Vos images sont compressées, et leur nom de fichier renommé, il est temps de les télécharger sur votre site et optimiser les éléments suivants:

Comment optimiser ses images pour le web

 

Le texte alternatif (l’attribut ALT)

Le texte alternatif (« Alt ») est l’un des éléments les plus importants dans l’optimisation de vos images, et permet de fournir une description du contenu de votre visuel aux moteurs de recherche tels que Google.

Le texte alternatif améliore aussi l’accessibilité pour les personnes qui ne peuvent pas voir les images sur les pages web, y compris lorsqu’elles utilisent des lecteurs d’écran.

Cet attribut devra comprendre une petite phrase descriptive qui contient vos mots-clés en rapport avec le contenu de votre page.

Le titre de l’image

Pour aider les autres utilisateurs à retrouver facilement votre image, il faudra choisir un titre clair, court et descriptif, tout en contenant au moins un mot-clé.
Sachez que le titre est souvent la phrase contenue dans la petite bulle qui s’affiche lorsque vous placez le curseur sur une image.

Notez qu’insérer le même texte dans le texte alternatif et le titre est tout à fait convenable.

Récapitulatif

  • Privilégier le format JPEG sauf pour les logos avec fond transparent (PNG).
  • Conserver une taille d’image inférieure à 150kb.
  • Compresser la taille des images avec Tinypng ou Squoosh.
  • Optimiser les images pour le référencement (SEO): nom de fichier pertinent, texte alternatif (Alt) et titre du fichier.

Créer un site web qui convertit

Le guide pour convertir ses visiteurs en clients avec un site internet efficace

Comment créer un site web efficace