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 sayede, veri kaybı olmadan yüksek çözünürlüklü bir resim elde edersiniz ve resmin daha hızlı yüklenmesini sağlarsınız.

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

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üklenmesini 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.
Veri kullanımı sınırlaması açılır listesinde Hızlı 3G'yi seçin.
Önbelleği devre dışı bırak onay kutusunu devre dışı bırakın.
Sayfayı tekrar yükleyin.

JPEG kaynağının yalnızca bazı JavaScript'lerden sonra indirilmeye başladığı bir şelaleyi gösteren Chrome Geliştirici Araçları Ağ paneli. — Ön yükleme yapılmadığında, tarayıcı komut dosyasını çalıştırmayı bitirdikten sonra resimler yüklenmeye başlar. İlk resim için bu gecikme gerekmez.

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 JPEG kaynağının indirildiği 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 resmi içeren ö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şlatılmaz. Bu da resmin görüntülenmesinde gereksiz 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 özelliğinden 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 seçeneği aynı kalmıştır.
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).
Last Painted Hero, 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ükleme 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>'yi önceden yüklemeyle ilgili çözüme ulaştırılması gereken bazı teknik sorunlar devam etmektedir. Bu süreçte geçici çözümler kullanabilirsiniz:

<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üklemede "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'da 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> öğelerinden 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 olmadığına bakılmaksızın, önceden yükleme işlemi en iyi şekilde resim kaynağı ilk işaretleme yükü içinde bulunamadığı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.