Duyarlı resimleri önceden yükleme

Barry Pollard

Yoav Weiss

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

Dikkat: Glitch barındırma hizmetini sonlandırdığı için bu sayfadaki bir veya daha fazla demo artık çalışmıyor.

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

Duyarlı görsellere genel bakış

Browser Support

• 73
• 79
• 78
• 17.2

Source

300 piksel genişliğinde bir ekranda web'de gezindiğinizi ve sayfanın 1.500 piksel genişliğinde bir resim istediğini varsayalım. Ekranınız bu ekstra çözünürlükle hiçbir şey yapamayacağı için bu sayfa mobil verilerinizin çoğunu boşa harcamıştır. İdeal olarak tarayıcı, resmin ekran boyutunuzdan sadece biraz daha geniş olan bir sürümünü (ör. 325 piksel) getirir. Bu sayede, veri israfı olmadan yüksek çözünürlüklü bir resim elde edilir ve resim daha hızlı yüklenir.

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ı, her 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

• 50
• 79
• 85
• 11.1

Source

Önceden yükleme, tarayıcıya HTML'de keşfedilmeden önce mümkün olan en kısa sürede yüklemek istediğiniz kritik kaynakları bildirmenizi sağlar. Bu, özellikle stil sayfalarına dahil edilen yazı tipleri, arka plan resimleri veya bir komut dosyasından yüklenen kaynaklar gibi kolayca bulunamayan kaynaklar için kullanışlıdır.

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

Önemli: Önceden yüklenen resimler muhtemelen yüksek önceliklidir ve bu nedenle fetchpriority="high" özelliğini içermelidir. Aksi takdirde önceden yükleme, as özelliği için varsayılan önceliği alır. Resimler için bu değer varsayılan olarak low şeklindedir. Böylece tarayıcı, oluşturmayı engelleyen içeriğe resimlerden daha fazla öncelik verebilir. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

imagesrcset ve imagesizes

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

Örneğin, aşağıdaki gibi 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 ekleyebilirsiniz:

<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 tarafından kullanılan kaynak seçim mantığını kullanarak bir istek başlatır.

Uyarı: Görüntü alanı yalnızca doküman oluşturulduğunda tanımlandığından, duyarlı resimler HTTP üstbilgisi önceden yüklemeleri için desteklenmeyebilir. Bu durum, 103 Erken İpuçları'nda erken önceden yükleme için kullanılamayacakları anlamına da gelir.

Chrome gibi bazı tarayıcılar, doküman tanımlandıktan ve HTML'nin ilk bölümü işlendikten sonra bu özelliklerle ön yüklemeleri işler. Bu, HTML standardına önerilmiştir. Ancak görüntü alanı belgede daha sonra yeniden tanımlanırsa (örneğin, geç bir <meta name="viewport"> öğesi) yanlış duyarlı resimler yüklenmeye başlamış olabileceğinden bu durum yine de riskli olabilir.

Sorun yaşamamak için duyarlı resimlerde Link: <...>; rel="preload" HTTP yanıt başlıkları yerine <link rel="preload" href="..."> öğelerini kullanmanız önerilir.

Kullanım alanları

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

Dinamik olarak eklenen duyarlı resimleri önceden yükleme

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

Bu sorunu, dinamik olarak yüklenen bir resim galerisi içeren web sitelerinde 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şlarına basın.
3. Ağ sekmesini tıklayın.
4. Throttling (Kısıtlama) açılır listesinde Fast 3G'yi (Hızlı 3G) seçin.
5. Önbelleği devre dışı bırak onay kutusunu devre dışı bırakın.
6. Sayfayı tekrar yükleyin.

Önceden yükleme yapılmadığında, resimler tarayıcı komut dosyasını çalıştırmayı tamamladıktan sonra yüklenmeye başlar. İlk resim için bu gecikme gereksizdir.

Burada preload kullanıldığında resim önceden yüklenmeye başlar. Böylece tarayıcının resmi göstermesi gerektiğinde resim gösterilmeye hazır olur.

İlk resmi önceden yüklemek, komut dosyasıyla aynı anda yüklenmeye başlamasını sağlar.

Önceden yüklemenin yarattığı farkı görmek için ilk örnekteki adımları uygulayarak aynı dinamik olarak yüklenen resim galerisini inceleyin ancak ilk resim önceden yüklenmiş olsun.

Not: Resim yüklemedeki gecikmeleri önlemenin bir başka yolu da işaretlemeye dayalı bir bant kullanmak ve tarayıcının ön yükleyicisinin gerekli kaynakları almasını sağlamaktır. Ancak bu yaklaşım her zaman pratik değildir. Örneğin, işaretleme tabanlı olmayan mevcut bir bileşeni yeniden kullanıyorsanız bu yaklaşım uygun olmayabilir.

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

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

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

Not: Bu söz dizimi, bu özelliğin hem Chromium hem de WebKit tabanlı tarayıcılarda tedarikçi firma ön eklerine olan ihtiyacını yok sayar. Bu özelliği kullanmayı planlıyorsanız bu sorunu otomatik olarak çözmek için Autoprefixer'ı (online araç olarak kullanılabilir) kullanabilirsiniz.

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

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

Bu örnekte, CSS tamamen indirilene kadar resim indirme işlemi başlamaz. Bu da resmin görüntülenmesinde gereksiz gecikmeye neden olur.

Uyumlu resim önceden yükleme, bu resimleri daha hızlı yüklemenize olanak tanır.

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

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

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

Burada resim ve CSS aynı anda indirilmeye başlar ve resmin daha hızlı yüklenmesi sağlanır.

Duyarlı resimleri önceden yüklemenin pratik etkileri

Duyarlı resimlerinizi önceden yüklemek teoride hızlandırabilir ancak pratikte ne yapar?

Bu soruyu yanıtlamak için demo PWA mağazasının iki kopyasını oluşturdum: Biri resimleri önceden yüklemiyor, diğeri ise bazılarını önceden yüklüyor. Sitede resimler JavaScript kullanılarak geç yüklenir. Bu nedenle, ilk görüntü alanında görünen resimlerin önceden yüklenmesi faydalı olabilir.

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

• Oluşturma Başlangıcı aynı kaldı.
• Hız İndeksi biraz iyileşti (273 ms, resimler daha hızlı yüklendiği için piksel alanının büyük bir kısmını kaplamıyor).
• Last Painted Hero 1, 2 saniye gibi önemli bir oranda iyileştirildi.

Resimler önceden yüklendiğinde çok daha hızlı gelir ve kullanıcı deneyimini önemli ölçüde iyileştirir.

Önceden yükleme ve <picture>

Web Performance Working Group, 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 bunu yapmıyor.

<picture> önceden yükleme için çözülmesi gereken bazı teknik sorunlar hâlâ mevcut ancak bu arada geçici çözümler de var:

<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çim mantığı, <source> öğelerinin media özelliklerini sırayla inceler, eşleşen ilk özelliği bulur ve ekli kaynağı kullanır.

Duyarlı ön yüklemede "sıra" veya "ilk eşleşme" kavramı 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, ilk type ile eşleşmeyi de destekler. Böylece, tarayıcının desteklediği ilk resim biçimini seçebilmesi için farklı resim biçimleri sağlayabilirsiniz.

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 ekleyerek 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> işlevinden farklı olarak, desteklenen ilk türde durmaz. Bu nedenle, birden fazla tür için birden fazla önceden yükleme eklenirse tüm resimler önceden yüklenir:

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

<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 işlevi görür. Bu türü destekleyen tarayıcılar önceden yüklemeden yararlanırken diğer tarayıcılar yararlanamaz.

Resmin HTML'de hızlıca bulunabildiği sitelerde önceden yükleme yapmamanızı ve 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'ni kullanırken en iyi uygulamadır. Çünkü tarayıcı desteğine göre tam resmin önceden yüklenmesine olanak tanır. Ayrıca, resimler veya sayfalar değiştiğinde önceden yüklemenin ana işaretlemeden 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 sonucu resim kaynağı ilk işaretleme yükünde bulunamadığında verir. Ayrıca, işaretlemeyi istemci tarafında oluşturan sitelerde, sunucudan tam işaretleme gönderen sitelere kıyasla daha fazla LCP iyileştirmesi elde edersiniz.