Πώς καθορίζει ο περιηγητής ποια εικόνα πρέπει να…

Ο περιηγητής καθορίζει ότι πρέπει να φορτωθεί μια εικόνα κατά την ανάλυση του εγγράφου HTML. Όταν ο αναλυτής συναντά τις ετικέτες <img>, <picture> ή το χαρακτηριστικό background-image σε CSS, καταλαβαίνει ότι πρέπει να κάνει ένα αίτημα για να λάβει τον πόρο (αρχείο εικόνας) που καθορίζεται στα χαρακτηριστικά src, srcset, data ή στην κανόνα CSS URL.

Η διαδικασία περιλαμβάνει:

Ανάλυση HTML/CSS: Ο περιηγητής διαβάζει και αναλύει γραμμή προς γραμμή τον κώδικα HTML. Όταν εντοπίζει τις ετικέτες <img>, <picture> με source ή κανόνες CSS με background-image, εξάγει το URL της εικόνας.
Δημιουργία κόμβου σε DOM/CSSOM: Για κάθε εικόνα, δημιουργείται ένας αντίστοιχος κόμβος στο Document Object Model (DOM) ή ορίζεται ένας κανόνας στο Cascading Style Sheets Object Model (CSSOM).
Δημιουργία του αιτήματος: Ο περιηγητής σχηματίζει ένα αίτημα HTTP προς τον διακομιστή που αναφέρεται στο URL της εικόνας. Το αίτημα είναι συνήθως τύπου GET.
Αποστολή του αιτήματος: Το σχηματισμένο αίτημα αποστέλλεται στον διακομιστή.
Λήψη της απάντησης: Ο διακομιστής επεξεργάζεται το αίτημα και στέλνει μια απάντηση που περιέχει τα δεδομένα της εικόνας.
Αποκωδικοποίηση και απόδοση: Ο περιηγητής λαμβάνει τα δεδομένα της εικόνας, τα αποκωδικοποιεί (π.χ., JPEG, PNG, GIF) και τα εμφανίζει στο κατάλληλο σημείο της ιστοσελίδας.

Για <picture> και srcset, ο περιηγητής χρησιμοποιεί πληροφορίες σχετικά με τη συσκευή (μέγεθος οθόνης, ανάλυση) και τις δηλωμένες συνθήκες μέσων για να καθορίσει ποια εικόνα από το σύνολο πηγών θα φορτώσει.

Παράδειγμα HTML με την ετικέτα <img>:

<img src="/images/logo.png" alt="Λογότυπο εταιρείας">

Παράδειγμα CSS με background-image:

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

Πώς καθορίζει ο περιηγητής ποια εικόνα πρέπει να φορτωθεί;