Tarayıcı nasıl yüklenmesi gereken resmi belirler?

Tarayıcı, HTML belgesi analiz edilirken bir resim yüklemenin gerektiğini belirler. Tarayıcı, <img>, <picture> etiketleri veya CSS'deki background-image özniteliğiyle karşılaştığında, src, srcset, data veya CSS kuralındaki URL'de belirtilen kaynaktan (resim dosyası) kaynak almak için istek yapması gerektiğini anlar.

İşlem şu adımları içerir:

1. HTML/CSS Analizi: Tarayıcı, HTML kodunu satır satır okur ve analiz eder. <img>, <picture> ve background-image içeren CSS kurallarıyla karşılaştığında, resim URL'sini çıkarır.
2. DOM/CSSOM'da düğüm oluşturma: Her resim için, Document Object Model (DOM) veya Cascading Style Sheets Object Model (CSSOM) içinde karşılık gelen bir düğüm oluşturulur veya kural tanımlanır.
3. İstek oluşturma: Tarayıcı, resim URL'sinde belirtilen sunucuya HTTP isteği yapar. Bu istek genellikle GET türündedir.
4. İsteğin gönderilmesi: Oluşturulan istek sunucuya gönderilir.
5. Yanıt alınması: Sunucu, isteği işler ve resim verilerini içeren yanıtı gönderir.
6. Decodlama ve render: Tarayıcı, resim verilerini alır, çözümler (örneğin JPEG, PNG, GIF) ve web sayfasında uygun yere gösterir.

<picture> ve srcset için, tarayıcı cihaz bilgilerini (ekran boyutu, çözünürlük) ve belirtilen medya koşullarını kullanarak hangi kaynaktan resmi yükleyeceğine karar verir.

İşte <img> etiketiyle örnek HTML:

<img src="/images/logo.png" alt="Şirket logosu">

background-image ile CSS örneği:

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