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ında yer alan 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" fetchpriority="high">

Önemli: Önceden yüklenen resimler muhtemelen yüksek önceliklidir. Bu nedenle, fetchpriority="high" özelliğini içermelidir. Aksi takdirde, önceden yükleme işlemi as özelliği için varsayılan önceliği alır. Tarayıcının, oluşturmayı engelleyen içeriğe görsellerden daha fazla öncelik verebilmesi için bu değer, görsellerde varsayılan olarak low'dır. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

`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" fetchpriority="high">

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 varsayalım. Bu durumda, slayt gösterisi komut dosyasının yüklemesini beklemek yerine bu resmi en kısa sürede göstermek 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 inceleyin ancak ilk resmi önceden yükleyin. 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 değerine 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ğ paneli, yalnızca bazı CSS'lerden sonra indirilmeye başlayan bir JPEG kaynağı içeren bir şelale gösteriyor. — 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" fetchpriority="high">

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 önceden yükleme özelliğinden 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, görselleri JavaScript kullanarak yavaş yüklediğinden, ilk görünüm alanında görünen görsellerin önceden yüklenmesi muhtemelen faydalı olacaktır.

Bu işlem, önyükleme yok ve resim önyükleme için aşağıdaki sonuçları verdi:

Render Başlatma (Start Render) 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 azaldı.

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 Performance Working Group, 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> öğesi için bu tartışma yapılmı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çim mantığı, media özelliklerini sırayla inceler, eşleşen ilk özelliği bulur ve eklenen kaynağı kullanır.<source>

Duyarlı önceden yükleme, "sıra" veya "ilk eşleşme" kavramına sahip olmadığından kesme noktalarını aşağıdakine benzer bir şeye çevirmeniz gerekir:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Ö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ı yalnızca önceden yükleme ile kısmen desteklenir: Tarayıcılar, yalnızca desteklenen türler için önceden yüklemeleri indirmelidir. Bu nedenle, önceden yüklemeye dahil ederek tarayıcıların desteklenmeyen MIME türlerini önceden yüklemesini önlemek için bunu kullanabilirsiniz:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Ancak <picture>'dan farklı olarak ilk desteklenen türde durmaz. Bu nedenle, birden fazla tür için birden fazla önceden yükleme varsa tüm resimler önceden yüklenir:

Yapılmaması gerekenler: Birden fazla türü önceden yükleme:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Bunun yerine şunu yapın: En çok tercih edilen türü önceden yükleyin:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

En yeni biçimin (bu örnekte AVIF) önceden yüklenmesi, destekleyen tarayıcıların yararlanacağı, diğer tarayıcıların ise önceden yüklemeden yararlanamayacağı bir aşamalı geliştirme işlevi görür.

Resmin HTML'de hızlıca bulunabildiği 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 her durumda en iyi uygulamadır. Tarayıcı desteğine bağlı olarak tam resmin önceden yüklenmesine olanak tanır. Ayrıca, resimler veya sayfalar değiştiğinde önceden yüklemenin ana işaretlemede eski hale gelme riskini de ortadan kaldırı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 resmin duyarlı olup olmamasından bağımsız olarak, ö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.

Duyarlı resimleri önceden yükleme Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Duyarlı resimlere genel bakış

Önyükleme genel bakışı

imagesrcset ve imagesizes

Kullanım alanları

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

image-set kullanarak arka plan resimlerini önceden yükleme

Duyarlı resimleri önceden yüklemenin pratik etkileri

Önceden yükleme ve <picture>

Önceden yükleme ve type

Largest Contentful Paint (LCP) üzerindeki etkiler

Duyarlı resimleri önceden yükleme

`imagesrcset` ve `imagesizes`

Önceden yükleme ve `<picture>`

Önceden yükleme ve `type`