Браузер кандайча жүктөлүшү керек болгон сүрөттү аныктайт?

Браузер HTML документти талдоо учурунда сүрөт жүктөөнүн зарыл экенин аныктайт. Ал <img>, <picture> тегдери же CSSтеги background-image атрибуту менен кезигүүдө, ал сүрөттүн ресурсу (сүрөт файлы) 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');
}