Insérer une image
Pour insérer une image en HTML, on utilise la balise <img>. Cette balise est auto-fermante, ce qui signifie qu'elle ne nécessite pas de balise de fermeture. L'attribut le plus important pour la balise <img> est l'attribut src, qui spécifie la source de l'image, c'est-à-dire le chemin vers le fichier image que vous souhaitez afficher.
En plus de l'attribut src, il est fortement recommandé d'utiliser l'attribut alt, qui fournit une description alternative de l'image. Cette description est utilisée par les lecteurs d'écran pour les personnes malvoyantes et s'affiche également si l'image ne peut pas être chargée (absente du serveur ou erreur de chemin).
<img src="logo.png" alt="Logo SDIS Oron-Jorat"> Il est préférable de ranger les images dans un dossier spécifique, souvent nommé images, pour une meilleure organisation de votre projet. Ainsi, le chemin vers l'image serait alors images/logo.png.
Astuce :
Si l'on pousse le rangement encore plus loins, on peut créer des sous-dossiers pour différencier les images de contenu (images/content), des icones (images/icons), des images pour l'interfaces (images/ui), etc.
<img src="images/content/logo.png" alt="Logo SDIS Oron-Jorat">Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :
Les différentes extensions
Il existe plusieurs formats d'images que vous pouvez utiliser en HTML, chacun ayant ses propres caractéristiques et utilisations recommandées. Les formats les plus courants sont : PNG, GIF et JPEG.
- PNG (Portable Network Graphics) :
Ce format est idéal pour les images avec des zones transparentes ou des couleurs unies ou même des dégradés, comme les logos ou les icônes. Il offre une bonne qualité d'image sans perte de données. - GIF (Graphics Interchange Format) :
Ce format est principalement utilisé pour les animations. Il prend en charge la transparence, mais il est limité à une palette de 256 couleurs, ce qui peut entraîner une qualité d'image inférieure pour les photos ou les images complexes. - JPG (Joint Photographic Experts Group) :
Ce format est idéal pour les photographies et les images avec de nombreux détails et couleurs. Cependant, il utilise une compression avec perte, ce qui signifie que la qualité de l'image peut être réduite si le taux de compression est élevé.
Ce format ne prend pas en charge la transparence.
Astuce :
Il est possible et recommandé d'utiliser un outil pour compresser l'image comme Squoosh, Pngyu, SVGOMG. Ils permettent de compresser les images sans perte de qualité, ce qui peut réduire considérablement la taille du fichier et améliorer les temps de chargement du site web.
Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :
La taille des images
L'attribut width
L'attribut width permet de définir la largeur d'une image en pixels. Lorsque vous spécifiez une valeur pour l'attribut width, le navigateur ajuste automatiquement la hauteur de l'image pour maintenir les proportions d'origine, à moins que vous ne spécifiiez également une valeur pour l'attribut height.
Par exemple, si vous avez une image avec une largeur d'origine de 400 pixels et une hauteur de 200 pixels, et que vous définissez l'attribut width à 200 pixels, le navigateur ajustera automatiquement la hauteur à 100 pixels pour maintenir les proportions de l'image.
<img src="images/logo.png" alt="Logo SDIS Oron-Jorat" width="200"> Attention :
Il est important de noter que l'utilisation de l'attribut width pour redimensionner les images peut entraîner une perte de qualité, surtout si vous agrandissez une image plus petite que sa taille d'origine. Il est généralement recommandé de redimensionner les images à la taille souhaitée avant de les utiliser sur votre site web pour garantir une meilleure qualité.
L'attribut height
L'attribut height permet de définir la hauteur d'une image en pixels. Lorsque vous spécifiez une valeur pour l'attribut height, le navigateur ajuste automatiquement la largeur de l'image pour maintenir les proportions d'origine, à moins que vous ne spécifiiez également une valeur pour l'attribut width.
Par exemple, si vous avez une image avec une largeur d'origine de 400 pixels et une hauteur de 200 pixels, et que vous définissez l'attribut height à 100 pixels, le navigateur ajustera automatiquement la largeur à 200 pixels pour maintenir les proportions de l'image.
<img src="images/logo.png" alt="Logo SDIS Oron-Jorat" height="100"> Attention :
Comme pour l'attribut width, l'utilisation de l'attribut height pour redimensionner les images peut entraîner une perte de qualité, surtout si vous agrandissez une image plus petite que sa taille d'origine. Il est généralement recommandé de redimensionner les images à la taille souhaitée avant de les utiliser sur votre site web pour garantir une meilleure qualité.
Définition des attributs width et height
Important :
Si vous définissez à la fois les attributs width et height, le navigateur redimensionnera l'image en fonction des valeurs spécifiées, même si cela peut entraîner une distorsion de l'image si les proportions ne sont pas maintenues. Par exemple, si vous définissez width="200" et height="100" pour une image qui a des proportions différentes, l'image sera étirée ou compressée pour correspondre aux dimensions spécifiées, ce qui peut déformer l'apparence de l'image.
Il est possible d'utiliser des pourcentages pour les attributs width et height. Dans ce cas, la taille de l'image sera relative à la taille de son conteneur parent. Par exemple, si vous définissez width="50%", l'image prendra 50% de la largeur de son conteneur parent. Cependant, il est important de noter que l'utilisation de pourcentages pour redimensionner les images peut également entraîner une perte de qualité, surtout si l'image est agrandie au-delà de sa taille d'origine.
Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :
