Skip to main content

Image

Les images ajoutent de la richesse visuelle et en améliorant l'expérience utilisateur.
Pour insérer une image dans une page web on utilise l'élément <img> en HTML.

<img src="chemin_vers_image.jpg" alt="Texte alternatif">
  • L'attribut src spécifie l'URL de l'image à afficher.
  • L'attribut alt fournit un texte alternatif qui sera affiché si l'image ne peut pas être chargée ou pour les utilisateurs ayant des lecteurs d'écran.
<img src="image.jpg" alt="Image de paysage">

Chemin vers l'Image​

Le chemin vers l'image peut être relatif ou absolu.
Un chemin relatif pointe vers un fichier image situé dans le même répertoire que la page HTML ou dans un sous-répertoire.
Un chemin absolu pointe vers une URL complète de l'image.

  • Chemin Relatif : <img src="images/image.jpg" alt="Image">
  • Chemin Absolu : <img src="https://example.com/images/image.jpg" alt="Image">

Formats d'Image Supportés​

Les formats d'image les plus couramment utilisés sur le web sont JPEG, PNG et GIF.
Le choix du format va déterminer la qualité et de compression de l'image.

WebP​

WebP est un format d'image moderne créé par Google qui offre une compression efficace et une qualité visuelle élevée.
Il utilise des algorithmes de compression avancés pour réduire la taille des fichiers d'image tout en conservant une qualité visuelle similaire à d'autres formats d'image populaires tels que JPEG et PNG.
WebP commence à être populaire et est mit en avant par google ce qui risque de le popularisé assez vite.

Bonnes Pratiques​

  1. Optimisation : Optimiser les images pour en les compressant sans compromettre la qualité visuelle.
  2. Texte Alternatif : Toujours fournir un texte alternatif (alt) pour chaque image afin d'avoir une accessibilité accrue et une meilleure indexation par les moteurs de recherche.
  3. Taille de l'Image : Utiliser des images de la taille appropriée pour éviter les temps de chargement excessifs et améliorer les performances du site.