Les images
Pour incorporer des images dans une page web, il est nécessaire de respecter certaines conditions.
1 - Le format
Les formats de fichier des images lisibles et les plus utilisés dans les sites web sont les suivants :
- Le format JPEG : images de type photographique avec possibilité de compression.
- Le format PNG : images riches en couleur avec possibilité de transparence.
- Le format GIF : image pauvre en couleur (256) avec possibilité de transparence sur 1 de ces couleurs.
- Le format SVG : image vectorielle avec possibilité de modification depuis le navigateur.
D'autres formats sont possibles, vous pouvez vous référer à la documentation officielle : MDN - images
2 - Le système colorimétrique
Pour le web, comme les images sont consultées depuis un écran, les fichiers doivent être enregistrés en RVB.
3 - La résolution
La résolution exprimée en ppp ou dpi est de 72 ppp pour les images destinées à l'affichage écran.
4 - Dimension des images
Bien que les images puissent être redimensionnées à l'aide des attributs width pour la largeur et height pour la hauteur, il est fortement recommandé d'utiliser des éditeurs d'image pour les mettre aux dimensions finales d'affichage.
5 - Les éditeurs d'image
Il existe de très nombreux éditeurs d'image gratuits qui permettent de bien les préparer avant leur incorporation dans une page web.
Même les plus simples d'entre eux proposent les fonctionnalités que l'on vient de présenter, à savoir :
- Définir le format.
- Définir le système colorimétrique.
- Définir la résolution.
- Recadrer et redimensionner.
La plupart du temps, on récupère les images depuis des sites web, ce qui implique que, à l'exception du recadrage et du redimensionnement, l'ensemble des autres critères sont normalement respectés.
Pour les passionnés du traitement des images et de la création graphique, on peut signaler une suite de logiciels professionnels (comme ceux de la société ®Adobe™) devenue gratuite en 2025 : ®Affinity™
6 - La balise <img />
Pour incorporer une image dans une page HTML on fait appel à la balise à la fois ouvrante et fermante <img />.
Pour indiquer au navigateur quel fichier image il doit incorporer on utilise l'attribut src en précisant comme valeur l'URL pour accéder au fichier.
Concernant l'URL, les mêmes règles (URL absolue et URL relative) présentées dans la page dédiée aux liens s'appliquent.
Voici un exemple d'écriture de cette balise pour afficher un fichier du logo du HTML 5 : <img src="img/html5-logo-256.png" />
7 - L'attribut <alt>
Toute balise <img /> doit également faire apparaître l'attribut <alt> qui signifie "texte alternatif".
Cet attribut permet de donner une description sommaire de l'image et il est obligatoire pour répondre notamment aux problématiques des personnes malvoyantes.
Corrigeons l'exemple précédent en rajoutant cet attribut : <img src="img/html5-logo-256.png" alt="Logo HTML5 256 pixels" />
8 - Les attributs <width> et <height>
Il est possible de rajouter les attributs <width> et <height> qui permettent d'indiquer la largeur et la hauteur de l'image (ses dimensions). Certains l'utilisent pour redimensionner les images, mais ce n'est pas recommandé pour les raisons suivantes :
- L'agrandissement d'une image peut produire une perte de qualité, surtout pour les images au format JPEG
- Avec la réduction, il n'y a pas de dégradation de la qualité, mais une réduction importante signifie que l'on prend le risque de récupérer une image très volumineuse qui peut prendre plus de temps pour être acheminée par le réseau internet. On utilise donc trop de ressources machine pour un résultat qui serait le même si les dimensions de l'image étaient identiques à celles de son affichage.
La meilleure utilisation de ces attributs est d'indiquer les dimensions exactes de l'image. Cela permet au navigateur de réserver son emplacement avant même de recevoir le fichier, notamment si l'image est habillée par du texte .
Corrigeons l'exemple précédent en rajoutant ces attributs : <img src="img/html5-logo-256.png" alt="Logo HTML5 256 pixels" width="256" height="256" />