Kako pregledač određuje koju sliku treba da učita?

Браузер одређује да је потребно учитати слику током парсирања HTML документа. Када парсер сретне тагове <img>, <picture> или атрибут background-image у CSS-у, он разуме да треба послати захтев за добијање ресурса (датотеке слике) наведеног у атрибутима src, srcset, data или у CSS правилу URL.

Процес укључује:

1. Парсирање HTML/CSS: Браузер чита и анализира ред по ред HTML код. Када открије тагове <img>, <picture> са source или CSS правила са background-image, извлачи URL слике.
2. Креирање чвора у DOM/CSSOM: За сваку слику креира се одговарајући чвор у Document Object Model (DOM) или се дефинише правило у Cascading Style Sheets Object Model (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');
}