Optimiser les images pour votre site web

Optimiser les images pour le web

Optimiser les images pour le web est essentiel pour améliorer la performance de votre site. En choisissant le bon format d’image, en redimensionnant et en compressant vos fichiers, vous pouvez significativement améliorer le temps de chargement de vos pages tout en offrant une meilleure expérience à vos utilisateurs.

Choisir le bon format d'image

Formats les plus courants

Lorsque vous récupérez des photos depuis votre smartphone, appareil photo ou internet, vous obtenez souvent des images au format JPG ou PNG. Ces formats sont principalement utilisés pour redimensionner, compresser et convertir les images destinées à un usage web.

Formats d'images professionnels

Les graphistes, les développeurs et les professionnels de la communication travaillent régulièrement avec des formats moins connus du grand public comme le PSD, SVG ou AI.

Le format SVG, couramment utilisé sur le web, est à privilégier pour afficher votre logo, vos icônes, ou des motifs. Il présente d’énormes avantages : léger, de haute qualité (pas de pixélisation ni de flou). Il rendra votre site web plus qualitatif et plus rapide à charger.

Formats compressés

Plébiscités par les moteurs de recherche, les formats compressés comme WebP et AVIF permettent d’alléger grandement votre site web et d’améliorer ses performances.

Nous reviendrons sur la conversion des images un peu plus bas.

Récapitulatif des formats

  • JPEG : Idéal pour les photos et les images avec beaucoup de couleurs. Utilisez une compression de 60-80% pour un bon équilibre entre qualité et taille de fichier.
  • PNG : Meilleur pour les images avec des zones de couleur unie ou de la transparence. Utilisez PNG-8 pour une taille de fichier plus petite si possible.
  • GIF : Utilisé pour les images animées ou les graphiques simples avec peu de couleurs.
  • WebP : Offre une compression supérieure à JPEG et PNG tout en maintenant une qualité élevée. Supporté par la plupart des navigateurs modernes.
  • SVG : Parfait pour les graphiques vectoriels, les icônes et les logos. Il est léger, scalable à l’infini sans perte de qualité.

Nommez vos images correctement

Lors de la création de noms de fichiers pour des images destinées au web, il est essentiel de suivre certaines règles de nomenclature pour assurer une bonne pratique en termes d’optimisation pour les moteurs de recherche (SEO), d’organisation et de compatibilité. Voici quelques règles à suivre :

Utiliser des mots-clés descriptifs

  • Choisissez des mots-clés pertinents qui décrivent le contenu de l’image.
  • Exemple : chat-noir-assis-canape-beige.jpg au lieu de IMG001.jpg.

Utiliser des tirets pour séparer les mots

  • Les tirets (-) sont préférés aux espaces ou aux underscores (_) car les moteurs de recherche les reconnaissent mieux comme séparateurs de mots.
  • Ne collez pas les mots-clés, les moteurs de recherche ne distinguera pas les mots et considérera le nom du fichier comme un seul mot clé.
  • Exemple : chat-noir-assis-canape-beige.jpg plutôt que chat_noir_assis_canape_beige.jpg ou chatnoirassiscanapebeige.jpg.

Éviter les caractères spéciaux et les majuscules

  • N’utilisez pas d’espaces, d’accents, d’apostrophes, de symboles ou de majuscules dans les noms de fichiers.
  • Exemple : equipe-de-foot.jpg plutôt que équipe de foot.jpg ou équipe-de-foot.JPG.

Maintenir une longueur de nom raisonnable

  • Gardez le nom de fichier concis mais descriptif. Un nom trop long peut être tronqué et n’est pas optimal pour le SEO.
  • Exemple : montagne-enneigee.jpg plutôt que photo-de-la-montagne-enneigee-avec-ciel-bleu-et-soleil.jpg.

Versioning et numérotation si nécessaire

  • Si vous avez plusieurs versions de la même image ou des images qui se ressemblent fortement (images d’un produitque vous vendez par exemple), utilisez des numéros ou des dates pour différencier les fichiers.
  • Exemple : chat-noir-assis-canape-beige-01.jpg, chat-noir-assis-canape-beige-02.jpg.
  • Vous pouvez également spécifier des dimensions en fin de nom de fichier : mont-blanc-1440x960-01.jpg (fichier aux dimensions de 1440 par 960 pixels)

Redimmensionnez vos images

Le redimensionnement des images pour le web est crucial pour optimiser la vitesse de chargement des pages, améliorer l’expérience utilisateur et assurer une bonne qualité visuelle. Voici les règles principales à suivre pour redimensionner les images destinées au web :

Déterminer la taille appropriée

  • Utilisation spécifique : Adaptez la taille de l’image à son utilisation. Par exemple, une image de fond de page n’a pas besoin d’être aussi petite qu’une miniature.
  • Dimensions maximales : Évitez de dépasser les dimensions maximales nécessaires pour l’affichage. Une largeur de 1920 pixels est généralement suffisante pour la plupart des usages en pleine page.

Quelques exemples d'utilisation

1) Bannières et en-têtes (Header Images) :

  • Plein écran (Full-width) : 1920 x 1080 pixels
  • Bandeau étroit (Narrow banner) : 1920 x 600 pixels
  • Bandeau très étroit (Slim banner) : 1920 x 400 pixels

2) Images de contenu (Content Images) :

  • Images pleine largeur (Full-width content images) : 800 à 1200 pixels de large
  • Images de taille moyenne (Medium content images) : 600 à 800 pixels de large
  • Petites images (Small content images) : 300 à 600 pixels de large

3) Vignettes et aperçus (Thumbnails) :

  • Standard : 150 x 150 pixels
  • Rectangulaire : 300 x 200 pixels
  • Galerie : 200 x 200 pixels

4) Images pour les réseaux sociaux :

  • Image de partage (Social sharing image) : 1200 x 630 pixels
  • Photo de couverture Facebook : 820 x 312 pixels
  • Image de publication Twitter : 1024 x 512 pixels
  • Image de publication Instagram : 1080 x 1080 pixels (carrée) ou 1080 x 1350 pixels (portrait)

5) Icônes :

  • Favicon : 16 x 16 pixels
  • Icône d’application : 512 x 512 pixels

6) Images de produit (pour e-commerce) :

  • Image principale : 800 x 800 pixels ou 1000 x 1000 pixels
  • Images supplémentaires : 600 x 600 pixels

7) Arrière-plans :

  • Image d’arrière-plan pleine page : 1920 x 1080 pixels ou plus grand
  • Arrière-plan section : 1600 x 900 pixels

Compressez vos images

La compression des images est essentielle pour réduire leur poids tout en maintenant une bonne qualité visuelle. Un fichier plus léger permet de charger les pages plus rapidement, améliorant ainsi l’expérience utilisateur et le référencement naturel (SEO). Pour compresser vos images, vous pouvez utiliser des outils en ligne comme Compressor.io, qui offre une excellente balance entre réduction de taille et qualité visuelle. Ce service supporte différents formats (JPEG, PNG, SVG, etc.) et est facile à utiliser, même pour les débutants.

Convertissez vos images

Pour optimiser vos images, il est souvent judicieux de les convertir vers des formats plus modernes et performants, tels que WebP ou AVIF. Ces formats permettent une compression plus efficace sans perte significative de qualité, réduisant ainsi le poids des images et améliorant les temps de chargement. Par exemple, après avoir comprimé vos images avec Compressor.io, vous pouvez utiliser un outil de conversion comme CloudConvert pour transformer vos fichiers en WebP. Cela vous aidera à offrir une meilleure performance globale à vos utilisateurs.

Conclusion

En suivant ces étapes, vous pouvez réduire le poids de vos images, améliorer le temps de chargement de votre site, et offrir une meilleure expérience à vos visiteurs. L’optimisation des images est un petit effort qui a un grand impact sur la performance globale de votre site web.

Pour aller plus loin sur l’optimisation des images :
Compresser ses images avec Compressor.io