Web için tarayıcı düzeyinde resim geç yükleme

Özel geç yükleme kodu yazmaya veya ayrı bir JavaScript kitaplığı kullanmaya gerek kalmadan resimleri geç yüklemek için loading özelliğini kullanabilirsiniz. Bu özelliğin demosunu burada bulabilirsiniz:

Bu sayfada, tarayıcıda geç yükleme uygulamasının ayrıntıları açıklanmaktadır.

Neden tarayıcı düzeyinde geç yükleme?

HTTP Arşivi'ne göre, resimler çoğu web sitesi için en çok talep edilen öğe türüdür ve genellikle diğer kaynaklardan daha fazla bant genişliği kullanırlar. Yirmi 90. yüzdelik dilimde, siteler masaüstü ve mobil cihazlarda 5 MB'ın üzerinde resim gönderiyor.

Daha önce ekran dışı resimlerin yüklenmesini ertelemenin iki yolu vardı:

• Intersection Observer API'yi kullanma
• scroll, resize veya orientationchange etkinlik işleyicilerini kullanma

Her iki seçenek de geliştiricilerin geç yükleme davranışını içermesini sağlayabilir ve birçok geliştirici, kullanımı daha da kolay olan soyutlamalar sağlamak için üçüncü taraf kitaplıklar oluşturmuştur.

Ancak doğrudan tarayıcı tarafından desteklenen geç yükleme sayesinde harici bir kitaplığa gerek yoktur. Tarayıcı düzeyinde geç yükleme, istemci JavaScript'i devre dışı bıraksa bile resimlerin yüklenmesinin devam etmesini de sağlar. Ancak yüklemenin yalnızca JavaScript etkinleştirildiğinde ertelendiğini unutmayın.

loading özelliği

Chrome, resimleri cihaz görüntü alanına göre bulundukları yere bağlı olarak farklı önceliklerde yükler. Görüntü alanının altındaki resimler daha düşük öncelikli olarak yüklenir ancak sayfa yüklenirken yine de getirilirler.

Ekran dışı resimlerin yüklenmesini tamamen ertelemek için loading özelliğini kullanabilirsiniz:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

loading özelliği için desteklenen değerler şunlardır:

• lazy: Kaynağın yüklenmesini, görüntü alanından hesaplanan bir uzaklığa ulaşana kadar erteleyin.
• eager: Tarayıcının varsayılan yükleme davranışı. Bu davranış, özelliği eklememekle aynıdır ve resmin, sayfanın neresinde olursa olsun yüklenmesi anlamına gelir. Bu varsayılan değerdir ancak araçlarınız açık bir değer olmadığında veya linter aracınız açıkça ayarlanmadıysa loading="lazy" değerini otomatik olarak eklerse bunu açıkça belirtmek faydalı olabilir.

loading özelliği ile getirme önceliği arasındaki ilişki

eager değeri, resim ekran dışındaysa resmin yüklenmesi geciktirilmeden resmin normal bir şekilde yüklenmesi için bir talimattır. Bu, loading özelliği olmayan başka bir resimden daha hızlı yüklenmez.

Önemli bir resmin (örneğin, LCP resmi) getirme önceliğini artırmak istiyorsanız fetchpriority="high" ile Getirme Önceliği'ni kullanın.

loading="lazy" ve fetchpriority="high" içeren bir resim, ekran dışındayken yine de gecikir ve daha sonra, neredeyse görüntü alanı içinde olduğunda yüksek bir öncelikle getirilir. Tarayıcı büyük olasılıkla bu resmi yüksek öncelikli olarak yükleyeceğinden bu kombinasyon da gerekli değildir.

Görüntü alanına uzaklık eşikleri

Kaydırmadan hemen görüntülenebilen tüm resimler normal şekilde yüklenir. Cihaz görüntü alanının çok altında yer alan resimler yalnızca kullanıcı bunların yanına kaydırdığında getirilir.

Chromium'un geç yükleme uygulaması, ekran dışındaki resimlerin, görüntü alanında görünür olmadan önce kullanıcı tarafından sayfayı kaydırdığı anda yüklenmelerini tamamlayacak kadar erken yüklenmesini sağlamaya çalışır.

Mesafe eşiği, aşağıdaki faktörlere göre değişiklik gösterir:

• Getirilen resim kaynağının türü
• Etkili bağlantı türü

Farklı etkili bağlantı türleri için varsayılan değerleri Chromium kaynağında bulabilirsiniz. Geliştirici Araçları'nda ağı daraltarak bu farklı eşiklerle denemeler yapabilirsiniz.

İyileştirilmiş veri tasarrufu ve görüntü alanından uzaklık eşikleri

Temmuz 2020'de Chrome, geliştiricilerin beklentilerini daha iyi karşılamak amacıyla görüntü geç yüklenmesi için görüntü alanından uzaklık eşiklerini uyumlu hale getirmek amacıyla önemli iyileştirmeler yaptı.

Hızlı bağlantılarda (4G), Chrome'un 3000px olan görüntü alanından mesafe eşiklerini 1250px, daha yavaş bağlantılarda (3G veya daha düşük) ise 4000px olan eşiği 2500px olarak değiştirdik. Bu değişiklik sayesinde iki kazanım elde edildi:

• <img loading=lazy>, JavaScript geç yükleme kitaplıklarının sunduğu deneyime daha yakın davranır.
• Yeni "görüntü alanından uzaklık" eşikleri hâlâ, resimlerin kullanıcılar sayfayı kaydırdıktan sonra muhtemelen yüklenmiş olacağı anlamına geliyor.

Aşağıda hızlı bağlantı (4G) kullanılan demolarımızdan birinin eski ve yeni görüntü alanına olan mesafe eşiklerinin karşılaştırmasını bulabilirsiniz:

Eski eşikler ile yeni eşikler karşılaştırması:

ve yeni eşikler ile LazySizes (popüler bir JavaScript geç yükleme kitaplığı) karşılaştırması:

Resimlerinize boyut özellikleri ekleme

Tarayıcı bir resmi yüklerken, açıkça belirtilmediği sürece resmin boyutlarını hemen bilmez. Tarayıcının bir sayfada resimler için yeterli alan ayırmasını sağlamak ve rahatsız edici düzen kaymalarını önlemek için tüm <img> etiketlerine width ve height özelliklerini eklemenizi öneririz.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Alternatif olarak, değerlerini doğrudan bir satır içi stilde belirtin:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

Boyutları ayarlamayla ilgili en iyi uygulama, bunları geç yüklüyor olmanıza bakılmaksızın <img> etiketleri için geçerlidir. Ancak geç yükleme bunu daha önemli hale getirebilir.

Chromium'da geç yükleme, resimlerin görünür hale gelir gelmez yüklenme ihtimalini artıracak bir şekilde uygulanır ancak yine de doğru zamanda yüklenmeme ihtimali vardır. Böyle bir durumda, resimlerinizde width ve height belirtilmezse Cumulative Layout Shift etkisi artar. Resimlerinizin boyutlarını belirleyemiyorsanız geç yükleme, bu artan düzen kaymaları riskiyle karşı karşıya olan ağ kaynaklarını kurtarabilir.

Çoğu senaryoda, boyut belirtmediğinizde resimler yine de geç yüklenir. Ancak bilmeniz gereken birkaç uç durum vardır. width ve height belirtilmezse resim boyutları varsayılan olarak 0×0 piksel olur. Resim galeriniz varsa her bir resim yer kaplamadığı ve hiçbir resim ekran dışına aktarılmadığı için tarayıcı başlangıçta bunların tümünün görüntü alanının içine sığmasına karar verebilir. Bu durumda, tarayıcı her şeyi yüklemeye karar verir, böylece sayfa daha yavaş yüklenir.

loading öğesinin çok sayıda resimle nasıl çalıştığıyla ilgili bir örnek için bu demoya göz atın.

<picture> öğesini kullanarak tanımladığınız resimleri geç yükleyebilirsiniz:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

<source> öğelerinin herhangi birinden hangi resmin yükleneceğine tarayıcı karar verse de, yedek <img> öğesine yalnızca loading eklemeniz gerekir.

İlk görüntü alanında görünür olan resimler her zaman hızlı bir şekilde yüklenir

Kullanıcı sayfayı ilk yüklediğinde görünen resimler, özellikle de LCP resimleri için tarayıcının varsayılan istek yükleme özelliğini kullanın. Böylece, resimler hemen kullanılabilir. Daha fazla bilgi için Çok fazla geç yüklemenin performans etkileri bölümüne bakın.

loading=lazy öğesini yalnızca ilk görüntü alanının dışındaki resimler için kullanın. Tarayıcı, resmin sayfada nerede olması gerektiğini belirleyene kadar resmi geç yükleyemez. Bu durum, resimlerin daha yavaş yüklenmesine neden olur.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Kontrollü azalma

loading özelliğini desteklemeyen tarayıcılar bunu yoksayar. Geç yüklemenin avantajlarından faydalanamazlar ancak geç yüklemenin olumsuz bir etkisi de olmaz.

SSS

Chrome'da resimleri otomatik olarak geç yükleyebilir miyim?

Önceden Chromium, Android için Chrome'da Basit mod'un etkinleştirilmesi ve loading özelliğinin sağlanmaması ya da loading="auto" değerine ayarlanması durumunda ertelenmeye uygun resimleri otomatik olarak geç yüklüyordu. Ancak, Basit mod ve loading="auto" kullanımdan kaldırılmıştır ve Chrome'da görüntülerin otomatik olarak geç yüklenmesini sağlamayla ilgili bir plan bulunmamaktadır.

Bir resmin yüklenmeden önce görüntü alanına ne kadar yakın olması gerektiğini değiştirebilir miyim?

Bu değerlerin kodu gömülüdür ve bu değerler API aracılığıyla değiştirilemez. Ancak, tarayıcılar farklı eşik mesafeleri ve değişkenleriyle deneme yaptığından bunlar ileride değişebilir.

CSS arka plan resimleri loading özelliğini kullanabilir mi?

Hayır, bunu yalnızca <img> etiketleriyle kullanabilirsiniz.

loading, görüntü alanında hemen görünmeyen resimlerle çalışabilir mi?

loading="lazy" kullanılması, görünür olmayan ancak hesaplanan mesafe içinde olan resimlerin yüklenmesini engelleyebilir. Bu resimler bir bant arkasında olabilir veya belirli ekran boyutlarında CSS tarafından gizlenmiş olabilir. Örneğin Chrome, Safari ve Firefox, resim öğesinde veya üst öğede display: none; stilini kullanan resimleri yüklemez. Ancak opacity:0 stili kullanma gibi diğer resim gizleme teknikleri yine de tarayıcının resmi yüklemesine neden olur. Gerektiği gibi işlediğinden emin olmak için uygulamanızı her zaman ayrıntılı bir şekilde test edin.

Chrome 121, bant gibi yatay kaydırma yapan resimlerin davranışını değiştirdi. Bunlar artık dikey kaydırma ile aynı eşikleri kullanmaktadır. Bu, bant kullanım alanında resimlerin görüntü alanında görünmeden önce yükleneceği anlamına gelir. Bu durum, yüklenen resmin kullanıcı tarafından fark edilme olasılığının daha düşük olduğu, ancak daha fazla indirme pahasına olacağı anlamına gelir. Chrome ile Safari ve Firefox'un davranışını karşılaştırmak için Yatay Geç Yükleme demosunu kullanın.

Resimleri geç yüklemek için zaten üçüncü taraf kitaplığı veya komut dosyası kullanıyorsam ne olur?

Modern tarayıcılarda yerleşik geç yüklemenin tam desteği sayesinde, muhtemelen resimleri geç yüklemek için bir üçüncü taraf kitaplığına veya komut dosyasına ihtiyacınız yoktur.

loading="lazy" ile birlikte üçüncü taraf kitaplığı kullanmaya devam etmenin nedenlerinden biri, özelliği desteklemeyen tarayıcılar için çoklu dolgu sağlamak veya geç yükleme tetiklendiğinde daha fazla kontrole sahip olmaktır.

Geç yüklemeyi desteklemeyen tarayıcıları nasıl ele alabilirim? {browsers-dont-support}

Sitenizdeki görüntüleri geç yüklemek için bir çoklu dolgu oluşturun veya üçüncü taraf kitaplığı kullanın. Bir tarayıcının aşağıdaki özelliği destekleyip desteklemediğini tespit etmek için loading özelliğini kullanabilirsiniz:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Örneğin, lazysizes popüler bir JavaScript geç yükleme kitaplığıdır. Geç boyutları yalnızca loading desteklenmediğinde yedek kitaplık olarak yüklemek için loading özelliği desteğini tespit edebilirsiniz. Bu yöntem şu şekilde çalışır:

• Desteklenmeyen tarayıcılarda istekli yüklemeyi önlemek için <img src> değerini <img data-src> ile değiştirin. loading özelliği destekleniyorsa data-src değerini src ile değiştirin.
• loading desteklenmiyorsa geç boyutlardan bir yedek yükleyin ve işlemi başlatın. Bunun için hangi görüntülerin geç yükleneceğini belirtmek için lazyload sınıfını kullanın:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Bu kalıbın demosunu burada bulabilirsiniz. Yedeğin nasıl çalıştığını görmek için eski bir tarayıcıda deneyin.

iframe'ler için geç yükleme, tarayıcılarda da desteklenir mi?

<iframe loading=lazy> de standart hale getirildi. Bu, loading özelliğini kullanarak iframe'leri geç yüklemenizi sağlar. Daha fazla bilgi için Ekran dışı iframe'leri geç yüklemenin zamanı geldi! konusuna bakın.

Tarayıcı düzeyinde geç yükleme, web sayfasındaki reklamları nasıl etkiler?

Kullanıcıya resim veya iframe olarak görüntülenen tüm reklamlar, diğer herhangi bir resim veya iframe'de olduğu gibi geç yüklenir.

Bir web sayfası yazdırılırken resimler nasıl işlenir?

Sayfa yazdırıldığında tüm resimler ve iframe'ler hemen yüklenir. Ayrıntılar için 875403 numaralı sorunu inceleyin.

Lighthouse, tarayıcı düzeyinde geç yüklemeyi tanır mı?

Farklı eşikler kullanabilen ekran dışı görüntü geç yükleme yaklaşımlarında Lighthouse 6.0 ve daha yüksek bir faktör, farklı eşikler kullanabilen kullanıcıların Ekran dışı görüntüleri ertele denetiminden geçmesini sağlar.

Performansı artırmak için resimleri geç yükleyin

Geç yüklenen resimler için tarayıcı desteği, sayfalarınızın performansını önemli ölçüde iyileştirmenizi sağlayabilir.

Chrome'da bu özelliğin etkinleştirilmesiyle ilgili olağan dışı bir davranış fark ettiniz mi? Hata bildiriminde bulunun!