როგორ განსაზღვრავს ბრაუზერი, რომელი სურათი უნდა ჩაიტვირთოს?

ბრაუზერმა განსაზღვრა, რომ HTML დოკუმენტის ანალიზის დროს საჭიროა სურათის ჩატვირთვა. როდესაც ანალიტიკოსი ხვდება <img>, <picture> ტეგებს ან CSS-ში background-image ატრიბუტს, ის ხვდება, რომ საჭიროა გამოგზავნოს მოთხოვნა რესურსის (სურათის ფაილი) მიღებისთვის, რომელიც მითითებულია src, srcset, data ან CSS-ის URL წესში.

პროცესი მოიცავს:

1. HTML/CSS-ის ანალიზი: ბრაუზერი კოდის ხაზ-ხაზზე კითხულობს და ანალიზს ახდენს. როდესაც ის პოულობს <img>, <picture> და background-image CSS წესებს, ის ამოიღებს სურათის URL-ს.
2. DOM/CSSOM-ში ნოდის შექმნა: თითოეული სურათისთვის, შეიქმნება შესაბამისი ნოდი Document Object Model (DOM)-ში ან განსაზღვრული იქნება წესები CSSOM-ში.
3. მოთხოვნის ფორმირება: ბრაუზერი ქმნის HTTP მოთხოვნას სერვერზე, რომელიც მითითებულია სურათის URL-ში. ეს მოთხოვნა ჩვეულებრივ GET ტიპისაა.
4. მოთხოვნის გაგზავნა: ფორმირებული მოთხოვნა იგზავნება სერვერზე.
5. პასუხის მიღება: სერვერი პროცესავს მოთხოვნას და აგზავნის პასუხს, რომელიც შეიცავს სურათის მონაცემებს.
6. დეკოდირება და ჩვენება: ბრაუზერი იღებს სურათის მონაცემებს, დეკოდირებს (მაგ., JPEG, PNG, GIF) და აჩვენებს მათ შესაბამის ადგილას ვებგვერდზე.

<picture> და srcset-ისთვის, ბრაუზერი იყენებს მოწყობილობის (ეკრანის ზომა, რეზოლუცია) და მითითებული მედია პირობების ინფორმაციას, რათა განსაზღვროს, რომელი წყაროს სურათი უნდა ჩაიტვირთოს.

HTML-ის მაგალითი <img> ტეგით:

<img src="/images/logo.png" alt="კომპანიის ლოგო">

CSS-ის მაგალითი background-image-თან:

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