Duyarlı resimleri önceden yükleyebilirsiniz. Bu, 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ğlayabilir.
Uyumlu görsellere genel bakış
Tarayıcı desteği
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ği varsayalım. Ekranınız bu kadar yüksek çözünürlükte hiçbir şey yapamadığı için söz konusu sayfa, mobil verilerinizin büyük bir kısmını harcadı. İdeal olarak tarayıcı, resmin ekran boyutunuzdan az daha geniş bir sürümünü (ör. 325 piksel) getirir. Bu şekilde veri israfı yapılmadan yüksek çözünürlüklü bir görüntü elde edilir ve görüntünün 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 bir 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="…">
Önyüklemeye genel bakış
Önceden yükleme, tarayıcıya bir an önce yüklemek istediğiniz kritik kaynakları HTML'de keşfedilmeden önce belirtmenizi sağlar. Bu özellik, özellikle stil sayfalarına eklenen 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ı görselleri önceden yüklemek için imagesrcset
ve imagesizes
özelliklerini kullanır. Bunları, <img>
öğesinde srcset
ve sizes
söz dizimiyle <link rel="preload">
ile birlikte kullanın.
Ö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, HTML'nizin <head>
bölümüne aşağıdakileri 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, srcset
ve sizes
'ün kullandığı kaynak seçim mantığını kullanan bir istek başlatır.
Kullanım alanları
Duyarlı resimleri önceden yüklemenin bazı kullanım alanlarını aşağıda bulabilirsiniz.
Dinamik olarak yerleştirilen duyarlı resimleri önceden yükleme
Bir slayt gösterisi kapsamında lokomotif resimleri dinamik olarak yüklediğinizi ve ilk olarak hangi resmin gösterileceğini bildiğinizi varsayalım. Bu durumda, slayt gösterisi komut dosyasının yüklemesini beklemeden bu resmi en kısa sürede göstermek istersiniz.
Bu sorunu, dinamik olarak yüklenen resim galerisi olan 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.
- Throttling 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ı resmi göstermek istediğinde resim hazır olur.
Ön yüklemenin ne gibi bir fark yarattığını görmek için ilk örnekteki adımları uygulayarak aynı dinamik olarak yüklenen resim galerisini ilk resim önceden yüklenmiş şekilde inceleyin.
image-set öğesini 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 dizimini kullanarak 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);
CSS arka plan resimleriyle ilgili sorun, tarayıcının bunları yalnızca sayfanın <head>
bölümündeki tüm CSS'yi indirip işledikten sonra keşfetmesidir.
Bu sorunu, duyarlı arka plan resmine sahip örnek bir web sitesinde inceleyebilirsiniz.
Duyarlı resimleri ö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">
href
özelliğini çıkarmak, <link>
öğesinde imagesrcset
'yi desteklemeyen ancak CSS'de image-set
'ı destekleyen tarayıcıların doğru kaynağı indirmesini sağlar. Ancak bu durumda önceden yükleme işlevinden yararlanamazlar.
Önceden yüklenmiş duyarlı arka plan resmiyle önceki örneğin nasıl davrandığını duyarlı arka plan ön yükleme demosunda inceleyebilirsiniz.
Duyarlı resimleri önceden yüklemenin pratik etkileri
Duyarlı resimlerinizi önceden yüklemek teoride hızlandırabilir ancak pratikte ne işe yarar?
Bu soruyu yanıtlamak için bir demo PWA mağazasının iki kopyasını oluşturdum: Resimleri önceden yüklemeyen ve bazılarını önceden yükleyen. Site, JavaScript kullanarak görüntüleri yavaş yüklediği için ilk görüntü alanında görünenleri önceden yüklemekten fayda görebilir.
Bu test, önyükleme yok ve resim önyükleme için aşağıdaki sonuçları verdi:
- Oluşturmayı Başlat düğmesi aynı kaldı.
- Hız Dizini biraz iyileşti (273 ms; resimler daha hızlı geldiğinden piksel alanının büyük bir bölümünü kaplamıyor).
- Son Boyanmış Kahraman, 1,2 saniye gibi önemli bir süreyle iyileşti.
Önceden yükle ve <picture>
Web Performansı Çalışma Grubu, srcset
ve sizes
için önceden yükleme eşdeğeri ekleme konusunu tartışıyor ancak "sanat yönetmenliği" kullanım alanını yöneten <picture>
öğesi için bu konu gündemde değil.
<picture>
önceden yüklenmesiyle ilgili olarak hâlâ çözülmesi gereken birkaç teknik sorun var, ancak bu süreçte geçici çözümler bulabilirsiniz:
<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 öğeyi bulur ve ekli kaynağı kullanır.
Uyumlu ön yükleme için "sıralama" 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)">
<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 amacıyla ilk type
'de eşleştirmeyi de destekler. Bu kullanım alanı, ön yüklemeyle desteklenmez.
Tür eşleştirme kullanan sitelerde ön yükleme yapmamanızı ve bunun yerine ön yükleme tarayıcısının <picture>
ve <source>
öğelerindeki resimleri almasını öneririz. Bu, özellikle uygun resme öncelik vermek için Getirme Önceliği'ni kullanırken en iyi uygulamadır.
Largest Contentful Paint (LCP) üzerindeki etkiler
Resimler Largest Contentful Paint (LCP) adayı olabileceğinden, önceden yüklenmeleri web sitenizin LCP'sini iyileştirebilir.
Önceden yüklediğiniz resmin duyarlı olup olmamasına bakılmaksızın, önceden yükleme işlemleri en iyi şekilde, resim kaynağı ilk işaretleme yükünde bulunabilir olmadığında çalışır. Ayrıca, işaretlemeyi istemci tarafında oluşturma özelliğini kullanan sitelerde, işaretlemeyi sunucudan eksiksiz olarak gönderen sitelere kıyasla daha fazla LCP iyileştirmesi elde edersiniz.