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" />

Accessibilité

TODO: alt

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

TODO: loading/decoding

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;
}