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

Duyarlı resimleri önceden yükleme

Barry Pollard

Yoav Weiss

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

Duyarlı resimlere genel bakış

Browser Support

Source

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ğini varsayalım. Ekranınız bu kadar yüksek çözünürlükle hiçbir şey yapamadığı için bu sayfa çok fazla mobil veri tüketir. İdeal olarak tarayıcı, ekran boyutunuzdan biraz daha geniş bir resim sürümü (ö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ı, herhangi bir 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ükleme genel bakışı

Browser Support

Source

Önceden yükleme, tarayıcıya HTML'de keşfedilmeden önce bir an önce yüklemek istediğiniz kritik kaynakları belirtmenizi sağlar. Bu özellik, özellikle kolayca bulunamayan kaynaklar (ör. stil sayfalarına dahil edilen yazı tipleri, arka plan resimleri veya bir komut dosyasından yüklenen kaynaklar) için yararlıdır.

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

`imagesrcset` ve `imagesizes`

<link> öğesi, duyarlı görüntüleri önceden yüklemek için imagesrcset ve imagesizes özelliklerini kullanır. <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 ile aynı kaynak seçimi mantığını kullanarak bir istek başlatır.

Kullanım alanları

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

Dinamik olarak yerleştirilen duyarlı resimleri önceden yükleme

Bir slayt gösterisinin parçası olarak lokomotif resimleri dinamik olarak yüklediğinizi ve ilk olarak hangi resmin gösterileceğini bildiğinizi düşünün. Bu durumda, bu resmi en kısa sürede göstermek ve slayt gösterisi komut dosyasının yüklemesini beklememek isteyebilirsiniz.

Bu sorunu, dinamik olarak yüklenen resim galerisi içeren 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.
Sınırlama 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.

Chrome Geliştirici Araçları Ağ panelinde, yalnızca bazı JavaScript'lerden sonra indirilmeye başlanan bir JPEG kaynağı içeren şelale gösteriliyor. — Önceden yükleme yapılmadığında, tarayıcı komut dosyasını çalıştırmayı tamamladıktan sonra resimler yüklenmeye başlar. İlk resim için bu gecikme gereksizdir.

Burada preload kullanılması, resmin önceden yüklenmeye başlamasını sağlar. Böylece, tarayıcının resmi göstermesi gerektiğinde resim görüntülenmeye hazır olur.

Chrome Geliştirici Araçları Ağ panelinde, bazı JavaScript'lerle paralel olarak indirilen bir JPEG kaynağı içeren bir şelale gösteriliyor. — İlk resmi önceden yüklemek, komut dosyasıyla aynı anda yüklenmeye başlamasını sağlar.

Önceden yüklemenin ne gibi bir fark yarattığını görmek için aynı dinamik olarak yüklenen resim galerisini, ilk resim önceden yüklenmiş şekilde inceleyin. Bunu yapmak için ilk örnekteki adımları uygulayın.

image-set 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 dizimiyle belirtebilirsiniz. Tarayıcı daha sonra ekranın DPR'sine göre hangisinin görüntüleneceğ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'leri indirip işledikten sonra keşfetmesidir.

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

Chrome Geliştirici Araçları Ağ panelinde, yalnızca bazı CSS'lerden sonra indirilmeye başlanan bir JPEG kaynağı içeren bir şelale gösteriliyor. — Bu örnekte, CSS tamamen indirilene kadar resim indirme işlemi başlamaz ve bu durum, resmin görüntülenmesinde gereksiz gecikmeye neden olur.

Duyarlı resim ö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 atlayarak <link> öğesinde imagesrcset özelliğini desteklemeyen ancak CSS'de image-set özelliğini destekleyen tarayıcıların doğru kaynağı indirmesini sağlayabilirsiniz. Ancak bu durumda ön yüklemeden yararlanamazlar.

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

Chrome Geliştirici Araçları Ağ panelinde, bazı CSS'lerle paralel olarak indirilen bir JPEG kaynağı içeren bir şelale gösteriliyor. — Burada resim ve CSS aynı anda indirilmeye başlar ve resmin daha hızlı yüklenmesini sağlar.

Duyarlı resimleri önceden yüklemenin pratik etkileri

Duyarlı resimlerinizi önceden yüklemek teoride hızlarını artırabilir ancak pratikte ne gibi bir etkisi olur?

Bu soruyu yanıtlamak için demo PWA mağazasının iki kopyasını oluşturdum: biri resimleri önceden yüklemeyen, diğeri ise bazılarını önceden yükleyen. Site, JavaScript kullanarak görüntüleri geç yüklediğinden ilk görüntü alanında görünen görüntülerin önceden yüklenmesi muhtemelen siteye fayda sağlayacaktır.

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

Start Render (Oluşturmaya Başla) aynı kaldı.
Hız dizini biraz iyileştirildi (273 ms, resimler daha hızlı geldiğinden piksel alanının büyük bir bölümünü kaplamıyor).
Son Boyanan Kahraman (Last Painted Hero) süresi 1, 2 saniye azalarak önemli ölçüde iyileştirildi.

WebPageTest film şeridi karşılaştırması, önceden yüklenen resimlerin yaklaşık 1,5 saniye daha hızlı gösterildiğini belirtiyor. — Önceden yüklenen resimler çok daha hızlı gelir ve kullanıcı deneyimini büyük ö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 eklemeyi tartışıyor ancak "sanat yönetimi" kullanım alanını işleyen <picture> öğesini tartışmıyor.

<picture> önceden yükleme için çözülmesi gereken bir dizi teknik sorun olsa da bu arada geçici çözümlerden yararlanabilirsiniz:

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

Duyarlı önceden yükleme, "sıra" veya "ilk eşleşme" kavramına sahip 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 üzere ilk type ile eşleşmeyi de destekler. Bu kullanım alanı önceden yükleme ile desteklenmez.

Tür eşleştirme kullanan sitelerde önceden yüklemeyi kullanmamanızı, 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 kullanılırken en iyi uygulamadı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 resim duyarlı olsun veya olmasın, önceden yüklemeler en iyi şekilde, resim kaynağı ilk işaretleme yükünde bulunamadığında çalışır. Ayrıca, istemci tarafında işaretleme oluşturulan sitelerde, sunucudan tam işaretleme gönderilen sitelere kıyasla daha fazla LCP iyileştirmesi elde edersiniz.