Bu sayfa, Cloud Translation API ile çevrilmiştir.

Duyarlı resimleri önceden yükleme

Barry Pollard

Yoav Weiss

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ış

Tarayıcı Desteği

Kaynak

Ö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'te Command+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.

Chrome Geliştirici Araçları Ağ panelinde, JPEG kaynağının sadece JavaScript'ten sonra indirilmeye başlandığı bir şelale gösteriliyor. — Önceden yükleme olmadan, resimler tarayıcı komut dosyasını çalıştırmayı tamamladıktan sonra yüklenmeye başlar. İlk resim için bu gecikme gerekli değildir.

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.

Bazı JavaScript'lere paralel olarak indirilen JPEG kaynağı içeren bir şelaleyi gösteren Chrome Geliştirici Araçları Ağ paneli. — İlk resmi önceden yüklemek, komut dosyasıyla aynı anda yüklenmesini sağlar.

Ö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.

JPEG kaynağının yalnızca bazı CSS'lerden sonra indirilmeye başladığı bir şelaleyi gösteren Chrome Geliştirici Araçları Ağ paneli. — Bu örnekte, CSS tamamen indirilene kadar resim indirme işlemi başlamaz. Bu da resmin görüntüsünde gereksiz bir gecikmeye neden olur.

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.

Bazı CSS'lere paralel olarak indirilen JPEG kaynağını gösteren bir şelaleyi gösteren Chrome Geliştirici Araçları Ağ paneli. — Bu durumda, resim ve CSS aynı anda indirilmeye başlar. Böylece resim daha hızlı yüklenir.

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üklenmiş resimlerin yaklaşık 1,5 saniye daha hızlı gösterildiğini gösteren WebPageTest film şeridi karşılaştırması. — Önceden yüklenen resimler çok daha hızlı gelir ve kullanıcı deneyimini önemli ölçüde iyileştirir.

Ö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.