Comment le navigateur détermine-t-il quelle image doit être chargée?

Le navigateur détermine qu'il est nécessaire de charger une image lors de l'analyse du document HTML. Lorsqu'il rencontre les balises <img>, <picture> ou l'attribut background-image en CSS, il comprend qu'il doit faire une requête pour obtenir la ressource (fichier image) spécifiée dans les attributs src, srcset, data ou dans la règle CSS URL.

Le processus comprend :

1. Analyse du HTML/CSS : Le navigateur lit et analyse ligne par ligne le code HTML. Lorsqu'il détecte des balises <img>, <picture> avec source ou des règles CSS avec background-image, il extrait l'URL de l'image.
2. Création d'un nœud dans DOM/CSSOM : Pour chaque image, un nœud correspondant est créé dans le Modèle d'Objet du Document (DOM) ou une règle est définie dans le Modèle d'Objet de Style en Cascade (CSSOM).
3. Formation de la requête : Le navigateur forme une requête HTTP vers le serveur indiqué dans l'URL de l'image. La requête est généralement de type GET.
4. Envoi de la requête : La requête formée est envoyée au serveur.
5. Réception de la réponse : Le serveur traite la requête et envoie une réponse contenant les données de l'image.
6. Décodage et rendu : Le navigateur reçoit les données de l'image, les décode (par exemple, JPEG, PNG, GIF) et les affiche à l'endroit approprié de la page web.

Pour <picture> et srcset, le navigateur utilise les informations sur l'appareil (taille de l'écran, résolution) et les conditions médias indiquées pour déterminer quelle image du lot de sources charger.

Exemple HTML avec la balise <img> :

<img src="/images/logo.png" alt="Logo de l'entreprise">

Exemple CSS avec background-image :

.header {
  background-image: url('/images/header-bg.jpg');
}