Ինչպե՞ս է բրաուզերը որոշում, թե որ պատկերն է անհրաժեշտ բեռնել։

Բրաուզերը որոշում է, որ անհրաժեշտ է բեռնել պատկեր՝ HTML փաստաթղթի վերլուծման ժամանակ: Երբ վերլուծիչը հանդիպում է <img>, <picture> թեգերին կամ CSS-ում background-image հատկությանը, նա հասկանում է, որ պետք է ուղարկի հարցում՝ ստանալու ռեսուրսը (պատկերի ֆայլը), որը նշված է src, srcset, data կամ CSS-ի URL կանոնում:

Ընթացակարգը ներառում է.

1. HTML/CSS վերլուծություն: Բրաուզերը կարդում և վերլուծում է HTML կոդը տող առ տող: Երբ հայտնաբերում է <img>, <picture> կամ CSS կանոններ background-image-ով, նա հանում է պատկեր 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');
}