¿Cómo determina el navegador qué imagen debe cargar?

El navegador determina que es necesario cargar una imagen al analizar el documento HTML. Cuando el analizador encuentra las etiquetas <img>, <picture> o el atributo background-image en CSS, comprende que debe realizar una solicitud para obtener el recurso (archivo de imagen) especificado en los atributos src, srcset, data o en la regla CSS URL.

El proceso incluye:

1. Análisis de HTML/CSS: El navegador lee y analiza línea por línea el código HTML. Al detectar etiquetas <img>, <picture> con source o reglas CSS con background-image, extrae la URL de la imagen.
2. Creación de un nodo en DOM/CSSOM: Para cada imagen se crea un nodo correspondiente en el Modelo de Objeto del Documento (DOM) o se define una regla en el Modelo de Objeto de Hojas de Estilo en Cascada (CSSOM).
3. Formación de la solicitud: El navegador forma una solicitud HTTP al servidor indicada en la URL de la imagen. La solicitud suele ser de tipo GET.
4. Envío de la solicitud: La solicitud formada se envía al servidor.
5. Recepción de la respuesta: El servidor procesa la solicitud y envía una respuesta que contiene los datos de la imagen.
6. Decodificación y renderizado: El navegador recibe los datos de la imagen, los decodifica (por ejemplo, JPEG, PNG, GIF) y los muestra en el lugar correspondiente de la página web.

Para <picture> y srcset, el navegador usa información del dispositivo (tamaño de pantalla, resolución) y las condiciones de medios indicadas para determinar qué imagen del conjunto de fuentes cargar.

Ejemplo de HTML con la etiqueta <img>:

<img src="/images/logo.png" alt="Logotipo de la empresa">

Ejemplo de CSS con background-image:

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