En HTML, les images sont généralement intégrées à une page web à l’aide de la balise <img>. Cette balise a deux attributs obligatoires :

src : l’adresse (url) de l’image que vous souhaitez intégrer
alt : un texte alternatif qui sera affiché si l’image ne peut pas être chargée, il fournit une description de l’image. Cela permet aux utilisateurs qui ne peuvent pas voir l’image de comprendre son contenu.

Voici quelques exemples d’intégration d’images en HTML :

<img src="assets/img/webdev-b-b-logo.webp" alt="WebDev Logo du site">

<img src="assets/img/webdev-b-b-logo.svg" alt="WebDev Logo du site">

<img src="assets/img/webdev-b-b-logo.png" alt="WebDev Logo du site">

<img src="assets/img/webdev-b-b-logo.jpg" alt="WebDev Logo du site">

<figure>
   <img src="assets/img/webdev-b-b-logo.jpg" alt="WebDev Logo du site">
</figure>

src : url relative ou absolue

L’attribut src de l’image peut être spécifié en absolu, c’est-à-dire que l’on doit indiquer l’adresse (url) complète de l’image p.ex https://domain.ext/chemin-complet/nom-image.webp ou en relatif (par rapport au fichier) soit c’est la page d’accueil le chemin relatif pourrait être dossier/nom-image.webp et si on imagine que la page se trouve dans le dossier /dossier/ on aura juste nom-image.webp

Les formats d’images

Il existe beaucoup de formats d’images, elles ont toutes +/- d’avantages et d’inconvénients. Actuellement la norme veut qu’on utilise le format .webp mais les .jpg et .png sont encore utilisés. Le scénario idéal serait le suivant :

1. Si l’élément est du vectoriel, conserver le format vectoriel avec les fichier .svg et les optimiser via svgomg
2. Convertir les images en webp, avec squoosh ou un convertisseur
3. Si l’image doit resté un gif, jpg, png : installer petit logiciel imageOptim et de passer les gif, jpg et png avant de les utiliser dans un site.

L’optimisation

L’optimisation des images est importante car la consommation de bande passante est un facteur important pour le référencement du site et pour éviter une frustration du visiteur qui doit attendre que les images soient chargées. Ainsi à l’aide des outils tels que svgomg, squoosh et imageOptim, vous devez rendre vos images les plus légères possibles.

En règle général, une image ne devrait pas dépasser 100ko. Si elle doit garder une très bonne qualité 200ko-250ko maximum. Pour atteindre ce poids, on réduit les dpi à 72dpi la taille de l’image à 2500px de largeur. Et on joue sur la qualité avec les option d’exportation de photoshop ou de squoosh

Image en background

Les images en background en CSS sont des images qui sont affichées en arrière-plan d’un élément (ou balise) HTML. Elles peuvent être utilisées pour ajouter de la couleur, du style ou de l’ambiance à une page Web.

Pour ajouter une image en background à un élément HTML, vous utilisez la propriété background-image dans votre fichier CSS. La syntaxe est la suivante :

élément {
  background-image: url("chemin/vers/l-image.png");
}

Par exemple, pour ajouter l’image suivante en arrière-plan du body de la page Web, vous utiliseriez le code suivant :

body {
  background-image: url("images/fond-de-page.png");
}

Il existe plein d’options pour gérer comment se déploie le background dans le container.
background-repeat : repeat | no-repeat | repeat-x | repeat-y;
background-size : valeur numérique | cover | contain ;
background-postition : center | right | left | top | bottom;

Image SVG en ligne

Il est possible d’inclure une image SVG directement dans le code HTML, en utilisant l’élément <svg>. Cette méthode permet d’interagir avec l’image SVG à l’aide de CSS ou de JavaScript. Et de ce fait de l’animer ou de changer des couleurs, les transparences, etc.

Voici un exemple de code HTML qui inclu une image SVG directement dans le code html :

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red">
  </rect>
</svg>

<header>
  <a href="/">
    <svg viewBox="0 0 100 100">
       <rect x="0" y="0" width="100" height="100" fill="red">
       </rect>
     </svg>
  </a>
</header>