Duyarlı resimleri önceden yükleyebilirsiniz. Böylece, img etiketini oluşturmadan önce tarayıcının bir srcset öğesinden doğru resmi tanımlamasına yardımcı olarak resimlerinizin önemli ölçüde daha hızlı yüklenmesini sağlayabilirsiniz.
Duyarlı resimlere genel bakış
Tarayıcı Desteği
- 73
- 79
- 78
- 17,2
Web'e 300 piksel genişliğindeki bir ekranda göz attığınızı 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 yapamadığından bu sayfa mobil verinizin büyük bir kısmını boşa harcamıştır. İdeal olarak tarayıcı, resmin ekran boyutundan küçük bir sürümünü (örneğin, 325 piksel) getirir. Bu, veri israfı yapmadan yüksek çözünürlüklü bir görüntü sağlar ve görüntünün daha hızlı yüklenmesini sağlar.
Duyarlı resimler, tarayıcıların farklı cihazlar için farklı resim kaynaklarını getirmesini sağlar. Resim CDN 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ı, tüm cihazlara 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ış
Önceden yükleme, HTML'de keşfedilmeden önce, bir an önce yüklemek istediğiniz kritik kaynakları tarayıcıya bildirmenize olanak tanır. Bu özellikle stil sayfalarındaki yazı tipleri, arka plan resimleri veya bir komut dosyasından yüklenen kaynaklar gibi kolayca bulunamayan kaynaklar için faydalıdır.
<link rel="preload" as="image" href="important.png">
imagesrcset ve imagesizes
<link> öğesi, duyarlı resimleri önceden yüklemek için imagesrcset ve imagesizes özelliklerini kullanır. Bunları, <img> öğesinde kullanılan srcset ve sizes söz dizimiyle <link rel="preload"> ile birlikte kullanın.
Örneğin, aşağıdakilerle birlikte belirtilen bir duyarlı 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, HTML'nizin <head> öğesine aşağıdaki kodu ekleyerek yapabilirsiniz:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Bu işlem, 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ükle
Lokomotif resimleri bir slayt gösterisinin parçası olarak dinamik bir şekilde yüklediğinizi ve önce hangi resmin gösterileceğini bildiğinizi düşünün. Bu durumda, muhtemelen resmi mümkün olan 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 galerisine sahip bir web sitesinde inceleyebilirsiniz:
- Bu slayt gösterisi demosunu yeni bir sekmede açın.
- Geliştirici Araçları'nı açmak için
Control+Shift+J(veya Mac'teCommand+Option+J) tuşuna basın. - Ağ sekmesini tıklayın.
- Kısıtlama açılır listesinden Hızlı 3G'yi seçin.
- Önbelleği devre dışı bırak onay kutusunu devre dışı bırakın.
- Sayfayı tekrar yükleyin.
Burada preload kullanılması resmin önceden yüklenmeye başlamasına olanak tanır. Böylece, tarayıcı tarafından görüntülenmesi gerektiğinde resim gösterilmeye hazır olabilir.
Önceden yüklemenin yaptığı farkı görmek için ilk örnekteki adımları uygulayarak aynı dinamik olarak yüklenen resim galerisini, ancak ilk resim önceden yüklenmiş halde inceleyin.
Resim kümesini kullanarak arka plan resimlerini önceden yükle
Farklı ekran yoğunlukları için farklı arka plan resimleriniz varsa bunları image-set söz dizimini kullanarak CSS'nizde belirtebilirsiniz. Daha sonra tarayıcı, ekrandaki DPR'ye 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> öğesindeki tüm CSS'yi indirip işledikten sonra keşfetmesidir.
Bu sorunu, duyarlı arka plan resmi olan örnek bir web sitesinde inceleyebilirsiniz.
Duyarlı resim önceden yükleme, bu resimleri daha hızlı yüklemenizi sağlar.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
href özelliğini hariç tutarak, <link> öğesinde imagesrcset öğesini desteklemeyen ancak CSS'de image-set özelliğini destekleyen tarayıcıların doğru kaynağı indirmesini sağlayabilirsiniz. Ancak bu durumda önceden yükleme özelliğinden faydalanamazlar.
Önceki örneğin önceden yüklenmiş bir duyarlı arka plan resmiyle nasıl davrandığını duyarlı arka plan önceden yükleme demosunda inceleyebilirsiniz.
Duyarlı resimleri önceden yüklemenin pratik etkileri
Duyarlı resimlerinizi önceden yüklemek teoride hızlandırabilir. Peki pratikte ne işe yarıyor?
Buna yanıt olarak, bir demo PWA mağazasının iki kopyasını oluşturdum: resimleri önceden yüklemeyen ve bazılarını önceden yükleyen. Site, resimleri JavaScript kullanarak geç yüklediğinden, ilk görüntü alanında görünenlerin önceden yüklenmesi muhtemelen fayda sağlayacaktır.
Bu durum, ön yükleme yok ve resim ön yüklemesi için aşağıdaki sonuçları verdi:
- Oluşturmayı Başlat aynı şekilde kaldı.
- Hız İndeksi biraz arttı (resimler daha hızlı geldiğinden 273 ms, piksel alanının büyük bir bölümünü kaplamaz).
- Last Painted Hero ise 1, 2 saniye önemli ölçüde iyileşti.
Önceden yükleme ve <picture>
Web Performansı Çalışma Grubu, "sanat yönü" kullanım alanını işleyen <picture> öğesi değil, srcset ve sizes için bir önceden yükleme eşdeğeri eklemeyi tartışıyor.
<picture> öğesinin önceden yüklenmesiyle ilgili olarak çözülecek bazı teknik sorunlar vardır ancak bu esnada geçici çözümler de mevcuttur:
<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ı bulunmadığından, ayrılma noktalarını aşağıdaki gibi bir biçime çevirmeniz gerekir:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Ö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 için ilk type üzerinde eşleşmeyi de destekler. Bu kullanım alanı, önceden yükleme ile desteklenmez.
Tür eşleştirmeyi kullanan sitelerde önceden yükleme işleminden kaçınmanızı ve bunun yerine ön yükleme tarayıcısının resimleri <picture> ve <source> öğelerinden almasını sağlamanızı öneririz. Özellikle uygun resme öncelik verilmesine yardımcı olması için Öncelikli İpuçları kullanılırken bu en iyi uygulamalardan biridir.
Largest Contentful Paint (LCP) üzerindeki etkiler
Resimler Largest Contentful Paint (LCP) adayları olabileceğinden, bunların önceden yüklenmesi web sitenizin LCP'sini iyileştirebilir.
Önceden yüklediğiniz resmin duyarlı olup olmamasından bağımsız olarak, önceden yükleme işlemi, resim kaynağı ilk işaretleme yükünde bulunabilir olmadığında en iyi şekilde çalışır. Ayrıca, istemci tarafında işaretleme oluşturan sitelerde, sunucudan tam işaretleme gönderen sitelere kıyasla daha fazla LCP iyileştirmesi elde edersiniz.