Браузер чӣ гуна муайян мекунад, ки кадом тасвирро бояд боргирӣ кард?

Браузер анықтайды, HTML құжатын талдау кезінде суретті жүктеу қажет екенін. <img>, <picture> тегтері немесе CSS-те background-image атрибуты кездескенде, ол суреттің URL-і көрсетілген src, srcset, data немесе CSS ережесіндегі URL арқылы ресурс алу сұрауын жасау керек екенін түсінеді.

Процесс келесі қадамдарды қамтиды:

1. HTML/CSS талдау: Браузер HTML кодын жол бойынша оқиды және талдайды. <img>, <picture> тегтері мен background-image CSS ережелерін анықтағанда, суреттің URL-ін шығарады.
2. DOM/CSSOM-да түйін құру: Әр сурет үшін Document Object Model (DOM) немесе Cascading Style Sheets Object Model (CSSOM) жүйесінде сәйкес түйін құрылады немесе ереже анықталады.
3. Сұрауды құру: Браузер суреттің URL-і көрсетілген серверге HTTP сұрауын қалыптастырады. Бұл сұрау әдетте 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');
}