Come determina il browser quale immagine caricare?

Il browser determina che è necessario caricare un'immagine durante l'analisi del documento HTML. Quando il parser incontra i tag <img>, <picture> o l'attributo background-image in CSS, comprende che deve effettuare una richiesta per ottenere la risorsa (file immagine) specificata negli attributi src, srcset, data o nella regola CSS URL.

Il processo include:

1. Parsing di HTML/CSS: Il browser legge e analizza riga per riga il codice HTML. Quando rileva i tag <img>, <picture> con source o regole CSS con background-image, estrae l'URL dell'immagine.
2. Creazione di un nodo in DOM/CSSOM: Per ogni immagine viene creato un nodo corrispondente nel Document Object Model (DOM) o viene definita una regola nel Cascading Style Sheets Object Model (CSSOM).
3. Formazione della richiesta: Il browser forma una richiesta HTTP al server indicato nell'URL dell'immagine. La richiesta è di solito di tipo GET.
4. Invio della richiesta: La richiesta formata viene inviata al server.
5. Ricezione della risposta: Il server elabora la richiesta e invia una risposta contenente i dati dell'immagine.
6. Decodifica e rendering: Il browser riceve i dati dell'immagine, li decodifica (ad esempio JPEG, PNG, GIF) e li visualizza nel punto corrispondente della pagina web.

Per <picture> e srcset, il browser utilizza le informazioni sul dispositivo (dimensione dello schermo, risoluzione) e le condizioni media indicate per determinare quale immagine del set di fonti caricare.

Esempio di HTML con il tag <img>:

<img src="/images/logo.png" alt="Logo aziendale">

Esempio CSS con background-image:

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