Duyarlı resimleri önceden yükleme

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Yayınlanma tarihi: 30 Eylül 2019, Son güncelleme tarihi: 10 Temmuz 2026

Duyarlı resimleri önceden yükleyebilirsiniz. Bu sayede, tarayıcının srcset içinden doğru resmi tanımlamasına yardımcı olarak resimlerinizin img etiketi oluşturulmadan önce çok daha hızlı yüklenmesini sağlayabilirsiniz.

Duyarlı resimlere genel bakış

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

300 piksel genişliğinde bir ekranda web'e göz attığınızı ve sayfanın 1.500 piksel genişliğinde bir resim istediğini varsayalım. Ekranınız bu kadar yüksek çözünürlükle hiçbir şey yapamadığı için bu sayfa çok fazla mobil veri kullanmıştır. İdeal olarak tarayıcı, ekran boyutunuzdan biraz daha geniş bir resim sürümü (ör. 325 piksel) getirir. Bu sayede, veri israfı olmadan yüksek çözünürlüklü bir resim elde edilir ve resmin daha hızlı yüklenmesi sağlanır.

Duyarlı resimler, tarayıcıların farklı cihazlar için farklı resim kaynakları getirmesine olanak tanır. Resim CDN'si kullanmıyorsanız her resim için birden fazla boyut kaydedin ve bunları srcset özelliğinde belirtin. w değeri, tarayıcıya her sürümün genişliğini bildirir. Böylece tarayıcı, herhangi bir cihaz için uygun sürümü seçebilir:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Önceden yüklemeye genel bakış

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

Önceden yükleme, tarayıcıya HTML'de keşfedilmeden önce bir an önce yüklemek istediğiniz kritik kaynakları belirtmenizi sağlar. Bu özellik, özellikle kolayca bulunamayan kaynaklar (ör. stil sayfalarında yer alan yazı tipleri, arka plan resimleri veya bir komut dosyasından yüklenen kaynaklar) için faydalıdır.

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset ve imagesizes

<link> öğesi, duyarlı görüntüleri önceden yüklemek için imagesrcset ve imagesizes özelliklerini kullanır. <link rel="preload"> ile birlikte kullanın. <img> öğesinde srcset ve sizes söz dizimi kullanılır.

Örneğin, aşağıdakilerle belirtilen duyarlı bir resmi önceden yüklemek istiyorsanız:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Bunu yapmak için HTML'nizin <head> bölümüne aşağıdakileri ekleyin:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

Bu, srcset ve sizes ile aynı kaynak seçimi mantığını kullanarak bir istek başlatır.

Kullanım alanları

Aşağıda, duyarlı resimleri önceden yüklemeyle ilgili bazı kullanım alanları verilmiştir.

Dinamik olarak yerleştirilen duyarlı resimleri önceden yükleme

Bir slayt gösterisinin parçası olarak lokomotif resimleri dinamik olarak yüklediğinizi ve ilk olarak hangi resmin gösterileceğini bildiğinizi varsayalım. Bu durumda, büyük olasılıkla bu resmi en kısa sürede göstermek ve slayt gösterisi komut dosyasının yüklemesini beklememek istersiniz.

Bu sorunu, dinamik olarak yüklenen resim galerisi içeren bir web sitesinde inceleyebilirsiniz:

  1. Bu slayt gösterisi demosunu yeni bir sekmede açın.
  2. Geliştirici Araçları'nı açmak için Control+Shift+J (veya Mac'te Command+Option+J) tuşuna basın.
  3. Ağ sekmesini tıklayın.
  4. Sınırlama açılır listesinde Hızlı 3G'yi seçin.
  5. Önbelleği devre dışı bırak onay kutusunu devre dışı bırakın.
  6. Sayfayı yeniden yükleyin.
Chrome Geliştirici Araçları Ağ panelinde, yalnızca bazı JavaScript'lerden sonra indirilmeye başlanan bir JPEG kaynağı içeren bir şelale gösteriliyor.
Önceden yükleme yapılmadığında, tarayıcı komut dosyasını çalıştırmayı tamamladıktan sonra resimler yüklenmeye başlar. İlk resim için bu gecikme gereksizdir.

Burada preload kullanılması, resmin önceden yüklenmeye başlamasına olanak tanır. Böylece, tarayıcının resmi göstermesi gerektiğinde resim görüntülenmeye hazır olur.

Chrome Geliştirici Araçları Ağ panelinde, bazı JavaScript'lerle paralel olarak indirilen bir JPEG kaynağı içeren bir şelale gösteriliyor.
İlk resmi önceden yüklemek, komut dosyasıyla aynı anda yüklenmeye başlamasını sağlar.

Önceden yüklemenin ne gibi bir fark yarattığını görmek için aynı dinamik olarak yüklenen resim galerisini inceleyin ancak ilk resmi önceden yükleyin. Bunu yapmak için ilk örnekteki adımları uygulayın.

image-set kullanarak arka plan resimlerini önceden yükleme

Farklı ekran yoğunlukları için farklı arka plan resimleriniz varsa bunları CSS'nizde image-set söz dizimiyle belirtebilirsiniz. Tarayıcı daha sonra ekranın DPR'sine göre hangisinin gösterileceğini seçebilir.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS arka plan resimleriyle ilgili sorun, tarayıcının bunları yalnızca sayfanın <head> bölümündeki tüm CSS'leri indirip işledikten sonra keşfetmesidir.

Bu sorunu, duyarlı bir arka plan resmi içeren örnek bir web sitesinde inceleyebilirsiniz.

Chrome Geliştirici Araçları Ağ panelinde, yalnızca bazı CSS'lerden sonra indirilmeye başlanan bir JPEG kaynağı içeren bir şelale gösteriliyor.
Bu örnekte, CSS tamamen indirilene kadar resim indirme işlemi başlamaz ve bu durum, resmin görüntülenmesinde gereksiz gecikmeye neden olur.

Duyarlı resim önceden yükleme özelliği, bu resimleri daha hızlı yüklemenizi sağlar.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

href özelliğini atlayarak <link> öğesinde imagesrcset özelliğini desteklemeyen ancak CSS'de image-set özelliğini destekleyen tarayıcıların doğru kaynağı indirmesini sağlayabilirsiniz. Ancak bu durumda ön yüklemeden yararlanamazlar.

Önceki örneğin, önceden yüklenmiş duyarlı bir arka plan resmiyle nasıl davrandığını duyarlı arka plan önceden yükleme demosunda inceleyebilirsiniz.

Chrome Geliştirici Araçları Ağ panelinde, bazı CSS'lerle paralel olarak indirilen bir JPEG kaynağı içeren bir şelale gösteriliyor.
Burada resim ve CSS aynı anda indirilmeye başlar ve resmin daha hızlı yüklenmesini sağlar.

Duyarlı resimleri önceden yüklemenin pratik etkileri

Duyarlı resimlerinizi önceden yüklemek teoride hızlarını artırabilir ancak uygulamada ne gibi etkileri olur?

Bu soruyu yanıtlamak için demo PWA mağazasının iki kopyasını oluşturdum: Biri resimleri önceden yüklemeyen, diğeri ise bazılarını önceden yükleyen. Site, JavaScript kullanarak görüntüleri geç yüklediğinden ilk görüntü alanında görünen görüntülerin önceden yüklenmesi muhtemelen faydalı olacaktır.

Bu işlem, önyükleme yok ve resim önyükleme için aşağıdaki sonuçları verdi:

  • Render Başlatma (Start Render) aynı kaldı.
  • Speed Index biraz iyileştirildi (273 ms, resimler daha hızlı geldiğinden piksel alanının büyük bir bölümünü kaplamıyor).
  • Son Boyanan Kahraman (Last Painted Hero) süresi 1, 2 saniye azalarak önemli ölçüde iyileştirildi.
WebPageTest film şeridi karşılaştırması, önceden yüklenen resimlerin yaklaşık 1,5 saniye daha hızlı gösterildiğini gösteriyor.
Önceden yüklenen görseller çok daha hızlı gelir ve kullanıcı deneyimini büyük ölçüde iyileştirir.

Önceden yükleme ve <picture>

Web Performansı Çalışma Grubu, srcset ve sizes için önceden yükleme eşdeğeri eklemeyi tartışıyor ancak "sanat yönetimi" kullanım alanını işleyen <picture> öğesi için bu tartışma yapılmıyor.

<picture> önceden yükleme için çözülmesi gereken bir dizi teknik sorun olsa da bu arada geçici çözümlerden yararlanabilirsiniz:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> öğesinin resim kaynağı seçme mantığı, media öğesindeki <source> özelliklerini sırayla inceler, eşleşen ilk özelliği bulur ve eklenen kaynağı kullanır.

Duyarlı önceden yükleme, "sıra" veya "ilk eşleşme" kavramına sahip olmadığından kesme noktalarını aşağıdaki gibi bir şeye çevirmeniz gerekir:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Önceden yükleme ve type

<picture> öğesi, tarayıcının desteklediği ilk resim biçimini seçebilmesi için farklı resim biçimleri sağlamanıza olanak tanımak üzere ilk type ile eşleşmeyi de destekler.

Bu kullanım alanı, önceden yükleme ile yalnızca kısmen desteklenir: Tarayıcılar, yalnızca desteklenen türler için önceden yüklemeleri indirmelidir. Bu nedenle, önceden yüklemeye dahil ederek tarayıcıların desteklenmeyen MIME türlerini önceden yüklemesini önlemek için bunu kullanabilirsiniz:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Ancak <picture>'dan farklı olarak ilk desteklenen türde durmaz. Bu nedenle, birden fazla tür için birden fazla önceden yükleme dahil edilirse tüm resimler önceden yüklenir:

Bunu yapmayın: Birden fazla türü önceden yükleme:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Bunun yerine şunu yapın: En çok tercih edilen türü önceden yükleyin:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

En yeni biçimi (bu örnekte AVIF) önceden yüklemek, progresif geliştirme olarak işlev görür. Bu biçimi destekleyen tarayıcılar avantaj elde ederken diğer tarayıcılar önceden yüklemeden yararlanamaz.

Resmin HTML'de kolayca bulunabildiği sitelerde önceden yüklemeyi kullanmamanızı, bunun yerine önceden yükleme tarayıcısının resimleri <picture> ve <source> öğelerinden almasını öneririz. Bu, özellikle uygun resme öncelik vermeye yardımcı olması için getirme önceliği kullanılırken her durumda en iyi uygulamadır. Tarayıcı desteğine bağlı olarak tam resmin önceden yüklenmesine olanak tanır. Ayrıca, resimler veya sayfalar değiştiğinde önceden yüklemenin ana biçimlendirmede eski hale gelme riskini de ortadan kaldırır.

Largest Contentful Paint (LCP) üzerindeki etkiler

Resimler Largest Contentful Paint (LCP) adayları olabileceğinden bunları önceden yüklemek web sitenizin LCP'sini iyileştirebilir.

Önceden yüklediğiniz resmin duyarlı olup olmadığına bakılmaksızın, önceden yüklemeler en iyi şekilde, resim kaynağı ilk işaretleme yükünde bulunamadığında çalışır. Ayrıca, istemci tarafında işaretleme oluşturulan sitelerde, sunucudan tam işaretleme gönderilen sitelere kıyasla daha fazla LCP iyileştirmesi elde edersiniz.