Images

Pour ajouter une image à ta page, place-la dans le dossier de ton site puis utilise la balise <img src="" />

<img src="photo.jpg" />
<img src="img/dessin.png" />

L’attribut src fontionne comme href : tu peux écrire un chemin relatif à l’emplacement de ton fichier HTML, ou bien commencer le chemin par un / pour partir de la racine. Tu peux également donner le lien complet vers une image d’un autre site.

<img src="https://placecats.com/300/200" />

Redimensionner l’image

Par défaut, les images ont la même taille que leur dimensions d’origine. S’il s’agit d’une grande photo, elle peut donc dépasser de l’écran.

<img src="photo.jpg" />

Tu peux donner une largeur maximum aux images pour régler ce problème. La hauteur s’adapte automatiquement.

img {
  max-width: 100%;
}

Optimiser l’image

Il est très important de faire attention au poids des images sur les pages web. Pour cela, il faut choisir le bon format d’image et les redimensionner pour éviter qu’elles ne soient trop grandes.

Tu ne verras peut-être pas la différence en testant ton site sur ton PC, mais sur un téléphone avec un réseau mobile instable, chaque mégaoctet compte ! Cela peut faire toute la différence pour rendre ton site plus agréable à naviguer.

Choisir le bon format

Tu connais sans doute les formats JPEG et PNG, mais connais-tu le WebP ? C’est le format recommandé pour le web.

• Le .jpg ou .jpeg est un format qui compresse l’image, ce qui signifie qu’il réduit son poids, mais au prix d’une perte de qualité. C’est un format pensé pour les photos et autres grandes images, car la perte de qualité ne se voit pas beaucoup tant qu’on regarde de loin.

• Le .png est un format qui compresse l’image tout en conservant la qualité d’origine. Bien sûr, cela fait des fichiers plus lourds, mais c’est préférable dans les cas où la détérioration du JPEG serait trop visible : petites icônes, logos et dessins, etc.

• Le .webp est un format d’image moderne qui s’adapte à tous les usages. Il compresse plus efficacement l’image que le JPEG, ce qui signifie qu’il réduit encore plus le poids, mais la qualité est meilleure. Ainsi, le WebP est pertinent dans de nombreux cas où on avait autrefois besoin de la qualité du PNG. De plus, s’il est vraiment important de garder la qualité d’origine, un mode « sans perte » est disponible.

Le WebP est rarement utilisé par le grand public, mais c’est actuellement le format le plus répandu sur les sites web modernes, car il accélère le chargement des pages web tout en conservant une bonne qualité d’image. Les logiciels de graphisme modernes te permettent d’exporter tes images en WebP.

Enfin, le .heif est le format des photos iPhone mais il ne peut pas être utilisé sur le web. Il faut convertir l’image en JPEG ou, mieux, en WebP.

Choisir les dimensions

Si ton image est plus grande que la page web où elle s’affiche, cela peut ralentir considérablement son chargement.

Prenons l’exemple des photos prises avec un téléphone. Elles pèsent généralement 3 à 5 Mo, ce qui est assez lent à charger sur le web, et mesurent environ 5000 pixels de large, alors que ta page web serait sans doute beaucoup moins large. En réduisant la largeur de l’image à environ la même largeur que ta page, et en convertissant en WebP avec un taux de qualité équilibré, tu devrais descendre à moins d’1 Mo, ce qui est beaucoup plus acceptable sur le web.

Attributs de chargement

Par défaut, le navigateur charge les images dès qu’il reçoit des balises <img>, même si lesdites images ne sont pas encore visibles à l’écran. Avec loading="lazy", l’image n’est chargée que si l’utilisateur s’en approche en faisant défiler la page.

<img src="photo.jpg" loading="lazy" />

C’est ce qu’on appelle le lazy loading, autrement dit « chargement paresseux ». Cela permet d’alléger le chargement initial de la page et d’économiser de la bande passante pour les utilisateurs qui ne font pas défiler toute la page.

Plus subtil, decoding="async" demande au navigateur de décoder l’image de manière asynchrone, ce qui évite de bloquer le rendu de la page. C’est généralement l’option la plus performante, mais les gains sont quasiment imperceptibles.

En fin de compte, la combinaison de ces deux attributs offre des performances optimales pour la plupart des images :

<img src="photo.jpg" loading="lazy" decoding="async" />

Éviter le décalage du contenu

Lorsque tu développes ton site sur ton ordinateur, les images se chargent instantanément et tu ne devrais pas constater de problème. Cependant, une fois en ligne, la requête prend une fraction de seconde, voire quelques secondes avec une connexion lente. Comme le navigateur ne connaît pas la taille de l’image à l’avance, un décalage désagréable se produit au moment où l’image est chargée. Pour éviter ce phénomène, tu peux préciser la largeur (width) et la hauteur (height) de l’image dans le HTML. Ainsi, le navigateur réservera un espace adéquat sur la page.

<img src="photo.jpg" width="800" height="600" />

Les générateurs de sites comme Astro renseignent automatiquement les attributs width, height, ainsi que loading et decoding, ce qui garantit une bonne expérience utilisateur sans que tu aies besoin de t’en soucier !

Accessibilité

L’attribut alt (pour alternative) est essentiel pour rendre tes images accessibles. Il fournit une description textuelle de l’image qui sera utilisée dans plusieurs situations :

• Pour les personnes utilisant des lecteurs d’écran
• Quand l’image ne peut pas être chargée (mauvaise connexion, lien cassé)
• Pour les moteurs de recherche et autres robots qui analysent le contenu de ton site

<img src="photo.jpg" alt="Un chat roux jouant avec une pelote de laine" />

Choisis des descriptions précises et concises qui transmettent le contenu et la fonction de l’image. Si l’image est purement décorative et n’apporte pas d’information importante, tu peux utiliser un attribut alt vide :

<img src="motif-decoratif.jpg" alt="" />

L’attribut vide indique aux technologies d’assistance d’ignorer cette image, ce qui évite de perturber l’utilisateur avec des informations non pertinentes.

Images d’arrière plan

En CSS, il est possible de donner une image de fond à un élément HTML. La propriété background-size précise si l’image doit se répéter ou être redimensionnée. Voir MDN.

div {
  background-image: url("photo.jpg");
  background-size: cover;
}