Brauzer necə yüklənəcək şəkli müəyyən edir?

Brauzer HTML sənədini analiz edərkən, şəkil yükləmənin lazım olduğunu müəyyən edir. <img>, <picture> etiketləri və ya CSS-də background-image atributu ilə qarşılaşdıqda, o, src, srcset, data və ya CSS qaydasında URL ilə göstərilən resursu (şəkil faylını) almaq üçün sorğu göndərməli olduğunu başa düşür.

Proses aşağıdakı mərhələləri əhatə edir:

HTML/CSS-in analizi: Brauzer HTML kodunu sətir-sətir oxuyur və analiz edir. <img>, <picture> və background-image ilə CSS qaydalarını tapdıqda, şəkil URL-ni çıxarır.
DOM/CSSOM-da düyün yaradılması: Hər bir şəkil üçün, Document Object Model (DOM) və ya Cascading Style Sheets Object Model (CSSOM) daxilində müvafiq düyün yaradılır və ya qayda müəyyən edilir.
Sorğunun formalaşdırılması: Brauzer, şəkil URL-də göstərilən serverə HTTP sorğusu göndərir. Bu sorğu adətən GET tipi olur.
Sorğunun göndərilməsi: Yaradılmış sorğu serverə göndərilir.
Cavabın alınması: Server sorğunu işləyir və şəkil məlumatlarını ehtiva edən cavab göndərir.
Dekodlama və göstərmə: Brauzer şəkil məlumatlarını alır, onları dekodlayır (məsələn, JPEG, PNG, GIF) və veb səhifədə müvafiq yerdə göstərir.

<picture> və srcset üçün, brauzer cihaz haqqında (ekran ölçüsü, qətnamə) və media şərtlərinə əsaslanaraq, hansı mənbədən şəkil yüklənəcəyinə qərar verir.

HTML nümunəsi <img> etiketi ilə:

<img src="/images/logo.png" alt="Şirkət loqosu">

CSS nümunəsi background-image ilə:

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