Resim performansı

Görseller genellikle web'deki en ağır ve en yaygın kaynaktır. Sonuç olarak, görselleri optimize etmek web sitenizin performansını önemli ölçüde artırabilir. Çoğu durumda, resimleri optimize etmek daha az bayt göndererek ağ süresini azaltmak anlamına gelir. Ancak kullanıcının cihazına uygun boyutlarda resimler sunarak kullanıcıya gönderilen bayt miktarını da optimize edebilirsiniz.

Resimler, <img> veya <picture> öğeleri ya da CSS background-image özelliği kullanılarak bir sayfaya eklenebilir.

Resim boyutu

Resim kaynaklarını kullanma konusunda yapabileceğiniz ilk optimizasyon, resmi doğru boyutta göstermektir. Bu durumda boyut terimi, resmin boyutlarını ifade eder. Başka değişkenler dikkate alınmadığında, 500 piksel x 500 piksel boyutunda bir kapsayıcıda görüntülenen bir resim için en uygun boyut 500 piksel x 500 piksel olur. Örneğin, 1.000 piksel kare bir resim kullanmak, resmin gerekenden iki kat daha büyük olduğu anlamına gelir.

Ancak uygun resim boyutunu seçerken birçok değişken dikkate alınması gerektiğinden, her durumda uygun resim boyutunu seçmek oldukça karmaşık bir iş olabilir. 2010'da iPhone 4 piyasaya sürüldüğünde ekran çözünürlüğü (640x960), iPhone 3'ün (320x480) iki katıydı. Ancak iPhone 4'ün ekranının fiziksel boyutu iPhone 3 ile yaklaşık olarak aynı kalmıştır.

Her şeyi daha yüksek çözünürlükte göstermek, metinleri ve resimleri önemli ölçüde küçültürdü. Tam olarak söylemek gerekirse, önceki boyutlarının yarısı kadar olurdu. Bunun yerine, 1 piksel 2 cihaz pikseli oldu. Buna cihaz piksel oranı (DPR) denir. iPhone 4 ve sonrasında piyasaya sürülen birçok iPhone modelinin DPR'si 2'dir.

Önceki örneği tekrar ele alalım. Cihazın DPR değeri 2 ise ve resim 500 piksel x 500 piksel boyutunda bir kapsayıcıda gösteriliyorsa 1.000 piksel kare bir resim (öz boyut olarak adlandırılır) artık en uygun boyuttur. Benzer şekilde, cihazın DPR değeri 3 ise 1.500 piksel kare bir resim optimum boyut olur.

srcset

<img> öğesi, tarayıcı tarafından kullanılabilecek olası resim kaynaklarının listesini belirtmenize olanak tanıyan srcset özelliğini destekler. Belirtilen her resim kaynağı, resim URL'sini ve bir genişlik veya piksel yoğunluğu tanımlayıcısı içermelidir.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

Önceki HTML snippet'inde, tarayıcıya DPR değeri 1 olan cihazlarda image-500.png, DPR değeri 2 olan cihazlarda image-1000.jpg ve DPR değeri 3 olan cihazlarda image-1500.jpg kullanması için piksel yoğunluğu tanımlayıcısı kullanılır.

Bu bilgiler basit görünse de belirli bir sayfa için en uygun resmi seçerken ekranın DPR'si tek dikkate alınacak faktör değildir. Sayfanın düzeni de dikkate alınması gereken bir faktördür.

sizes

Önceki çözüm yalnızca resmi tüm ekranlarda aynı CSS piksel boyutunda gösterirseniz işe yarar. Çoğu durumda, bir sayfanın düzeni ve kapsayıcının boyutu, kullanıcının cihazına bağlı olarak değişir.

sizes özelliği, her bir kaynak boyutunun bir medya koşulundan ve bir değerden oluştuğu bir kaynak boyutu grubu belirtmenize olanak tanır. sizes özelliği, resmin amaçlanan görüntüleme boyutunu CSS piksel cinsinden tanımlar. srcset genişlik tanımlayıcılarıyla birlikte kullanıldığında tarayıcı, kullanıcının cihazı için en uygun resim kaynağını seçebilir.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

Önceki HTML snippet'inde srcset özelliği, tarayıcının aralarından seçim yapabileceği resim adaylarının virgülle ayrılmış bir listesini belirtir. Listedeki her aday, resmin URL'sinden ve ardından resmin doğal genişliğini belirten bir söz diziminde oluşur. Bir resmin öz boyutu, boyutlarıdır. Örneğin, 1000w tanımlayıcısı, resmin doğal genişliğinin 1.000 piksel olduğunu gösterir.

Tarayıcı, bu bilgileri kullanarak sizes özelliğindeki medya koşulunu değerlendirir ve bu durumda, cihazın görüntü alanı genişliği 768 pikseli aşarsa resmin 500 piksel genişliğinde gösterilmesi talimatı verilir. Daha küçük cihazlarda resim 100vw boyutunda veya tam ekran genişliğinde gösterilir.

Tarayıcı, en uygun resmi bulmak için bu bilgileri srcset resim kaynaklarının listesine ekleyebilir. Örneğin, kullanıcı 3 DPR değerine sahip 320 piksel ekran genişliğinde bir mobil cihaz kullanıyorsa resim 320 CSS pixels x 3 DPR = 960 device pixels boyutunda gösterilir. Bu örnekte, en yakın boyutlu resim 1.000 piksel (1000w) doğal genişliğe sahip image-1000.jpg olur.

Dosya biçimleri

Tarayıcılar çeşitli farklı resim dosyası biçimlerini destekler. WebP ve AVIF gibi modern resim biçimleri, PNG veya JPEG'e kıyasla daha iyi sıkıştırma sağlayabilir. Böylece resim dosyanızı daha küçük hale getirerek indirme süresini kısaltabilirsiniz. Resimleri modern biçimlerde sunarak kaynağın yükleme süresini azaltabilirsiniz. Bu da Largest Contentful Paint (LCP) metriğinin daha düşük olmasına neden olabilir.

WebP, tüm modern tarayıcılarda çalışan yaygın olarak desteklenen bir biçimdir. WebP genellikle JPEG, PNG veya GIF'den daha iyi sıkıştırma sağlar. Hem kayıplı hem de kayıpsız sıkıştırma sunar. WebP, kayıplı sıkıştırma kullanılırken bile alfa kanalı şeffaflığını destekler. Bu özellik, JPEG codec'inde yoktur.

AVIF daha yeni bir resim biçimidir ve WebP kadar yaygın olarak desteklenmese de tarayıcılarda makul düzeyde destekleniyor. AVIF hem kayıplı hem de kayıpsız sıkıştırmayı destekler. Testler, bazı durumlarda JPEG'ye kıyasla% 50'den fazla tasarruf sağladığını göstermiştir. AVIF ayrıca geniş renk gamı (WCG) ve yüksek dinamik aralık (HDR) özelliklerini de sunar.

Sıkıştırma

Resimler söz konusu olduğunda iki tür sıkıştırma vardır:

1. Kayıplı sıkıştırma
2. Kayıpsız sıkıştırma

Kayıplı sıkıştırma, quantization aracılığıyla resim doğruluğunu azaltarak çalışır ve chroma alt örnekleme kullanılarak ek renk bilgileri atılabilir. Kayıplı sıkıştırma, genellikle benzer içeriklere sahip fotoğraflar veya görüntüler gibi çok fazla gürültü ve renk içeren yüksek yoğunluklu resimlerde en etkilidir. Bunun nedeni, kayıplı sıkıştırma nedeniyle oluşan bozulmaları bu kadar ayrıntılı resimlerde fark etmenin çok daha zor olmasıdır. Ancak kayıplı sıkıştırma, çizgi resimler gibi keskin kenarlar, benzer şekilde keskin ayrıntılar veya metin içeren görüntülerde daha az etkili olabilir. Kayıplı sıkıştırma, JPEG, WebP ve AVIF resimlerine uygulanabilir.

Veri kaybı olmadan sıkıştırma, bir resmi veri kaybı olmadan sıkıştırarak dosya boyutunu küçültür. Kayıpsız sıkıştırma, bir pikseli komşu pikselleriyle arasındaki farka göre tanımlar. GIF, PNG, WebP ve AVIF resim biçimleri için kayıpsız sıkıştırma kullanılır.

Squoosh, ImageOptim veya bir resim optimizasyonu hizmetini kullanarak resimlerinizi sıkıştırabilirsiniz. Sıkıştırma işleminde tüm durumlara uygun evrensel bir ayar yoktur. Önerilen yaklaşım, resim kalitesi ile dosya boyutu arasında iyi bir denge bulana kadar farklı sıkıştırma düzeyleriyle denemeler yapmaktır. Bazı gelişmiş resim optimizasyon hizmetleri bunu sizin için otomatik olarak yapabilir ancak bu hizmetler tüm kullanıcılar için ekonomik olmayabilir.

<picture> öğesi

<picture> öğesi, birden fazla resim adayı belirtme konusunda size daha fazla esneklik sunar:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

<picture> öğesi içinde <source> öğeleri kullandığınızda AVIF ve WebP resimleri için destek ekleyebilirsiniz ancak tarayıcı modern biçimleri desteklemiyorsa daha uyumlu eski resim biçimlerine geri dönebilirsiniz. Bu yaklaşımda tarayıcı, eşleşen ilk <source> öğesini seçer. Resmi bu biçimde oluşturabiliyorsa bu resmi kullanır. Aksi takdirde tarayıcı, belirtilen bir sonraki <source> öğesine geçer. Önceki HTML snippet'inde AVIF biçimi, WebP biçimine göre önceliklidir. AVIF veya WebP desteklenmiyorsa JPEG biçimine geçilir.

<picture> öğesi, içine yerleştirilmiş bir <img> öğesi gerektirir. alt, width ve height özellikleri <img> üzerinde tanımlanır ve hangi <source> seçilmiş olursa olsun kullanılır.

<source> öğesi media, srcset ve sizes özelliklerini de destekler. Daha önceki <img> örneğine benzer şekilde, bunlar tarayıcıya farklı görüntüleme alanlarında hangi resmin seçileceğini belirtir.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media özelliği bir medya koşulu alır. Önceki örnekte, medya koşulu olarak cihazın DPR'si kullanılmıştır. DPR'si 1,5'ten büyük veya 1,5'e eşit olan tüm cihazlar ilk <source> öğesini kullanır. <source> öğesi, tarayıcıya görüntü alanının 768 pikselden geniş olduğu cihazlarda seçilen resim adayını 500 piksel genişliğinde görüntülemesini söyler. Bu, küçük cihazlarda görünüm alanının tüm genişliğini kaplar. media ve srcset özelliklerini birleştirerek hangi resmin kullanılacağı üzerinde daha ayrıntılı kontrol sahibi olabilirsiniz.

Bu durum, çeşitli ekran genişliklerinin ve cihaz piksel oranlarının değerlendirildiği aşağıdaki tabloda gösterilmektedir:

1 DPR'ye sahip cihazlar, resmi 500 piksel genişliğinde harici boyutta görüntüleyen çoğu masaüstü kullanıcısı da dahil olmak üzere image-500.jpg resmini indirir. Öte yandan, DPR'si 3 olan mobil kullanıcılar, DPR'si 3 olan masaüstü cihazlarda kullanılan image-1500.jpg'yi indirir.

<picture>
  <source
    media="(min-width: 561px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

Bu örnekte, <picture> öğesi, yüksek PBM'ye sahip geniş cihazlar için farklı resimler kullanmak üzere ek bir <source> öğesi içerecek şekilde ayarlanmıştır:

Bu ek sorguyla, image-1000-sm.jpg ve image-1500-sm.jpg'un küçük görüntü alanlarında gösterildiğini görebilirsiniz. Bu ek bilgiler, sıkıştırma kusurları bu boyut ve yoğunlukta çok fazla görünmediğinden ve masaüstü cihazlardaki resim kalitesinden ödün verilmediğinden resimleri daha da sıkıştırmanıza olanak tanır.

Alternatif olarak, srcset ve media özelliklerini ayarlayarak küçük görüntü alanlarında büyük resimler yayınlamaktan kaçınabilirsiniz:

<picture>
  <source
    media="(min-width: 561px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

Önceki HTML snippet'inde, genişlik tanımlayıcıları cihaz piksel oranı tanımlayıcıları lehine kaldırılmıştır. Mobil cihazlarda sunulan resimler, DPR değeri 3 olan cihazlarda bile /image-500.jpg veya /image-1000.jpg ile sınırlıdır.

Karmaşıklığı yönetme

Duyarlı resimlerle çalışırken her resim için birçok farklı boyut varyantı ve biçimle karşılaşabilirsiniz. Önceki örnekte, her boyut için varyantlar kullanılır ancak AVIF ve WebP hariç tutulur. Kaç varyantınız olmalıdır? Birçok mühendislik sorununda olduğu gibi, yanıt genellikle "bağlıdır" şeklinde olur.

En iyi uyumu sağlamak için mümkün olduğunca fazla varyant kullanmak cazip gelebilir ancak her ek resim varyantının bir maliyeti vardır ve tarayıcı önbelleği daha az verimli şekilde kullanılır. Yalnızca bir varyant olduğunda her kullanıcı aynı resmi alır. Bu nedenle resim çok verimli bir şekilde önbelleğe alınabilir.

Öte yandan, çok sayıda varyant varsa her varyant için başka bir önbelleğe alma girişi gerekir. Varyantın önbelleğe alma girişinin süresi dolduysa ve resmin kaynak sunucudan tekrar getirilmesi gerekiyorsa sunucu maliyetleri artabilir ve performans düşebilir.

Bunun dışında, HTML dokümanınızın boyutu her varyasyonla birlikte büyür. Her resim için birden fazla kilobaytlık HTML gönderdiğinizi fark edebilirsiniz.

Accept istek başlığına göre resim yayınlama

Accept HTTP istek üst bilgisi, sunucuyu kullanıcının tarayıcısının hangi içerik türlerini anladığını bilgilendirir. Bu bilgiler, sunucunuz tarafından HTML yanıtlarınıza ek bayt eklemeden en uygun resim biçimini sunmak için kullanılabilir.

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

Önceki HTML snippet'i, en uygun resim biçimini seçip sunmak için sunucunuzun JavaScript arka ucuna ekleyebileceğiniz kodun basitleştirilmiş bir sürümüdür. Accept istek üst bilgisi image/avif içeriyorsa AVIF resmi yayınlanır. Aksi takdirde, Accept üst bilgisi image/webp içeriyorsa WebP resmi yayınlanır. Bu koşulların hiçbiri geçerli değilse JPEG resmi yayınlanır.

Yanıtları, neredeyse her tür web sunucusunda Accept istek başlığının içeriğine göre değiştirebilirsiniz. Örneğin, Apache sunucularındaki resim isteklerini mod_rewrite kullanarak Accept başlığına göre yeniden yazabilirsiniz.

Bu, Görsel İçerik Yayınlama Ağı'nda (CDN) göreceğiniz davranışa benzer. Resim CDN'leri, resimleri optimize etmek ve kullanıcının cihazına ve tarayıcısına göre en uygun biçimi göndermek için mükemmel çözümlerdir.

Buradaki en önemli nokta, bir denge bulmak, makul sayıda resim adayı oluşturmak ve kullanıcı deneyimi üzerindeki etkiyi ölçmektir. Farklı resimler farklı sonuçlar verebilir. Her resme uygulanan optimizasyonlar, sayfadaki boyutuna ve kullanıcılarınızın kullandığı cihazlara bağlıdır. Örneğin, tam genişlikli bir hero resmi, e-ticaret ürün listeleme sayfasındaki küçük resimlerden daha fazla varyant gerektirebilir.

Geç yükleme

loading özelliğini kullanarak tarayıcıya, resimleri görüntü alanında göründüklerinde yavaş yüklemesini söyleyebilirsiniz. lazy özellik değeri, tarayıcıya görüntüyü görüntü alanının içinde (veya yakınında) olana kadar indirmemesini söyler. Bu, bant genişliğinden tasarruf sağlar ve tarayıcının, görüntü alanında bulunan kritik içeriği oluşturmak için ihtiyaç duyduğu kaynaklara öncelik vermesine olanak tanır.

decoding

decoding özelliği, tarayıcıya resmin kodunu nasıl çözmesi gerektiğini bildirir. async değeri, tarayıcıya resmin kodunu çözmenin eşzamansız olabileceğini bildirir. Bu da diğer içeriğin oluşturulma süresini iyileştirebilir. sync değeri, tarayıcıya resmin diğer içerikle aynı anda sunulmasını söyler. auto için varsayılan değer, tarayıcının kullanıcı için en iyi olana karar vermesine olanak tanır.

Resim demoları

Bilginizi test etme

Sıradaki konu: Video performansı

Görüntüler web'de kullanılan en yaygın medya türü olsa da performans söz konusu olduğunda göz önünde bulundurmanız gereken tek şey değildir. Web'de kullanılan yaygın bir medya türü olan videonun da kendine özgü performans özellikleri vardır. Bu kursun sonraki modülünde, videoları optimize etme ve verimli bir şekilde yüklemeyle ilgili bazı teknikleri keşfedin.