Resim performansı

Resimler genellikle web'deki en ağır ve en yaygın kaynaktır. Sonuç olarak, resimleri 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 kısaltmak anlamına gelir. Ancak kullanıcının cihazı için uygun şekilde boyutlandırılmış resimler sunarak kullanıcıya gönderilen bayt miktarını da optimize edebilirsiniz.

Resimler, <img> veya <picture> öğelerini ya da CSS background-image özelliğini kullanarak bir sayfaya eklenebilir.

Resim boyutu

Resim kaynaklarını kullanmak söz konusu olduğunda gerçekleştirebileceğiniz ilk optimizasyon, resmi doğru boyutta görüntülemektir. Bu durumda, boyut terimi, bir resmin boyutlarını ifade eder. Başka hiçbir değişken hesaba katılmadığında, 500 piksele 500 piksellik bir kapsayıcıda görüntülenen bir resim, ideal olarak 500 piksele 500 piksel boyutunda olacaktır. Örneğin, 1.000 piksellik bir kare resim kullanmak, resmin iki kat daha büyük olacağı anlamına gelir.

Bununla birlikte, uygun resim boyutunu seçmek için birçok değişken söz konusudur. Bu nedenle, her durumda uygun resim boyutunu seçme görevi oldukça karmaşık hale gelir. 2010'da iPhone 4 piyasaya sürüldüğünde ekran çözünürlüğü (640x960), iPhone 3'ün (320x480) iki katıydı. Bununla birlikte, iPhone 4'ün ekranının fiziksel boyutu yaklaşık iPhone 3 ile aynı kaldı.

Her şeyi daha yüksek çözünürlükte görüntülemek metin ve resimlerin önemli ölçüde küçülmesine, tam olarak aynısını söylemek içinse önceki boyutlarının yarısına ulaşılmasına neden olacaktır. Bunun yerine, 1 piksel 2 cihaz pikseli oldu. Buna cihaz piksel oranı (DPR) denir. iPhone 4 ve ondan sonra piyasaya sürülen birçok iPhone modelinin DPR'si 2'dir.

Önceki örneğe dönersek, cihazın DPR'si 2 ise ve resim 500 piksele 500 piksellik bir kapsayıcıda görüntülenirse 1.000 piksellik bir kare resim (gerçek boyut olarak bilinir) artık optimum boyuttur. Benzer şekilde, cihazın DPR'si 3 ise 1.500 piksellik kare bir resim en uygun boyut olur.

srcset

<img> öğesi, tarayıcının kullanabileceği olası resim kaynaklarının listesini belirtebilmenizi sağlayan 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'i, tarayıcının DPR'si 1 olan cihazlarda image-500.png, DPR'si 2 olan cihazlarda image-1000.jpg ve DPR'si 3 olan cihazlarda image-1500.jpg kullanmasını belirtmek için piksel yoğunluğu tanımlayıcısını kullanır.

Bunların tümü kesilmiş gibi görünse de belirli bir sayfa için en uygun resmi seçerken dikkat edilmesi gereken tek nokta ekranın DPR'si değildir. Dikkat edilmesi gereken bir diğer nokta da sayfanın düzenidir.

sizes

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

sizes özelliği, her kaynak boyutunun bir medya koşulu 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 pikseli cinsinden tanımlar. srcset genişlik tanımlayıcılarıyla birleştirildiğinde 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 seçebileceği resim adaylarının virgülle ayrılmış bir listesini belirtir. Listedeki her aday, resmin URL'sinden oluşur. Ardından resmin doğal genişliğini belirten bir söz dizimi kullanılır. Bir görselin gerçek boyutu, boyutudur. Örneğin, 1000w tanımlayıcısı, resmin doğal genişliğinin 1.000 piksel genişliğinde olduğunu ifade eder.

Tarayıcı, bu bilgileri kullanarak sizes özelliğindeki medya durumunu değerlendirir ve bu örnekte, cihazın görüntü alanı genişliği 768 pikseli aşıyorsa resmin 500 piksel genişliğinde görüntüleneceğine karar verilir. Daha küçük cihazlarda görüntü 100vw veya tam görüntü alanı genişliğinde görüntülenir.

Daha sonra tarayıcı, en uygun resmi bulmak için bu bilgileri srcset resim kaynağı listesiyle birleştirebilir. Örneğin, kullanıcı, ekran genişliği 320 piksel ve DPR'si 3 olan bir mobil cihaz kullanıyorsa resim 320 CSS pixels x 3 DPR = 960 device pixels konumunda 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 birkaç farklı resim dosyası biçimini destekler. WebP ve AVIF gibi modern resim biçimleri, PNG veya JPEG'den daha iyi sıkıştırma sağlayabilir. Bu sayede resim dosyanızın boyutunu küçülterek indirme işlemi daha az zaman alır. Modern biçimlerde görüntü sunarak bir kaynağın yükleme süresini azaltabilirsiniz. Bu, daha düşük bir Largest Contentful Paint (LCP) sonucuna neden olabilir.

WebP, tüm modern tarayıcılarda çalışan geniş şekilde desteklenen bir biçimdir. Hem kayıplı hem de kayıpsız sıkıştırma sunan WebP, genellikle JPEG, PNG veya GIF'ten daha iyi bir sıkıştırmaya sahiptir. WebP, kayıplı sıkıştırma kullanılırken bile alfa kanalı şeffaflığını da destekler. Bu özellik, JPEG codec'inin sunmadığı bir özelliktir.

AVIF daha yeni bir resim biçimidir ve WebP kadar yaygın şekilde desteklenmese de tarayıcılar genelinde makul düzeyde yeterli desteğe sahiptir. AVIF hem kayıplı hem de kayıpsız sıkıştırmayı destekler ve testlerde, bazı durumlarda JPEG'ye kıyasla% 50'den fazla tasarruf görüldü. AVIF, Geniş Renk Gamutu (WCG) ve Yüksek Dinamik Aralık (HDR) özellikleri de sunar.

Sıkıştırma

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

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

Kayıplı sıkıştırma, nicelleştirme yoluyla görüntü doğruluğunu azaltarak çalışır ve renk alt örneklemesi kullanılarak ek renk bilgileri silinebilir. Kayıplı sıkıştırma, çok fazla parazit ve renge sahip yüksek yoğunluklu resimlerde (genellikle benzer içeriğe sahip fotoğraflar veya görüntüler) en etkili sonucu verir. Bunun nedeni, kayıplı sıkıştırma ile üretilen eserlerin bu tür ayrıntılı görüntülerde fark edilme olasılığının çok daha düşük olmasıdır. Bununla birlikte, kayıplı sıkıştırma, çizgi resmi, benzer şekilde sade ayrıntılar veya metin gibi keskin kenarlar içeren görüntülerde daha az etkili olabilir. Kayıplı sıkıştırma JPEG, WebP ve AVIF resimlerine uygulanabilir.

Kayıpsız sıkıştırma, veri kaybı olmayan bir resmi sıkıştırarak dosya boyutunu azaltır. Kayıpsız sıkıştırma, bir pikseli, komşu piksellerinden farkına dayanarak tanımlar. Kayıpsız sıkıştırma; GIF, PNG, WebP ve AVIF resim biçimleri için kullanılır.

Squoosh, ImageOptim veya bir resim optimizasyon hizmeti kullanarak resimlerinizi sıkıştırabilirsiniz. Sıkıştırma sırasında, tüm durumlar için uygun olan evrensel bir ayar yoktur. Önerilen yaklaşım, resim kalitesi ile dosya boyutu arasında iyi bir uzlaşma bulana kadar farklı sıkıştırma seviyeleriyle denemeler yapmaktır. Bazı gelişmiş görsel optimizasyon hizmetleri bu işlemi sizin için otomatik olarak yapabilir, ancak tüm kullanıcılar için finansal olarak uygun olmayabilir.

<picture> öğesi

<picture> öğesi, birden çok resim adayını belirtme konusunda size daha fazla esneklik sağlar:

<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> öğesinde <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ı belirtilen ilk <source> öğesini seçerek eşleşen bir öğe seçer. Resmi bu biçimde oluşturabiliyorsa o 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 ve AVIF ya da WebP desteklenmiyorsa JPEG biçimine döner.

<picture> öğesi için içine yerleştirilmiş bir <img> öğesi gerekir. alt, width ve height özellikleri <img> üzerinde tanımlanır ve hangi <source> seçildiğinden bağımsız olarak kullanılır.

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

<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. Yukarıdaki örnekte, medya koşulu olarak cihazın DPR'si kullanılır. DPR'si 1,5 veya daha yüksek olan tüm cihazlar ilk <source> öğesini kullanır. <source> öğesi, tarayıcıya, 768 pikselden geniş görüntü alanına sahip cihazlarda seçilen resmin 500 piksel genişliğinde görüntülendiğini bildirir. Bu işlem, daha küçük cihazlarda görüntü alanı genişliğini tamamen kaplar. media ve srcset özelliklerini birleştirerek hangi resmin kullanılacağını daha iyi kontrol edebilirsiniz.

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

DPR'si 1 olan cihazlar image-500.jpg resmini indirir. Buna masaüstü kullanıcıların çoğu da dahildir. Bu kullanıcılar resmi 500 piksel genişliğinde dış boyutu olarak görüntüler. Öte yandan, DPR'si 3 olan mobil kullanıcılar, potansiyel olarak daha büyük bir image-1500.jpg dosyasını indirir. Masaüstü cihazlarda kullanılan DPR'si 3 olan resimle aynıdır.

<picture>
  <source
    media="(min-width: 560px) 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 DPR'ye sahip geniş cihazlarda farklı resimler kullanmak amacıyla ek bir <source> öğesi içerecek şekilde ayarlanmıştır:

Bu ek sorguyla image-1000-sm.jpg ve image-1500-sm.jpg öğelerinin küçük görüntü alanlarında görüntülendiğini görebilirsiniz. Bu ek bilgiler, resimleri daha fazla sıkıştırmanızı sağlar. Bunun nedeni, sıkıştırma yapılarının bu boyut ve yoğunlukta çok görünür olmaması ve masaüstü cihazlardaki resim kalitesinden ödün vermemesidir.

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

<picture>
  <source
    media="(min-width: 560px)"
    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ı kaldırıldı. Bunun yerine cihaz piksel oranı tanımlayıcıları kaldırıldı. Mobil cihazlarda yayınlanan görüntüler, DPR'si 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 bir resim için birçok farklı boyut varyasyonu ve biçimiyle karşılaşabilirsiniz. Yukarıdaki örnekte her boyut için varyasyonlar kullanılmıştır ancak AVIF ve WebP hariç tutulur. Kaç varyantınız olmalı? Birçok mühendislik probleminde olduğu gibi bu sorunun cevabı da "değişir" olma eğilimindedir.

En iyi sonucu almak için mümkün olduğunca çok varyasyon kullanmak cazip görünse de, her ek resim varyantının bir maliyeti vardır ve tarayıcı önbelleğinden daha az verimli bir şekilde yararlanmasına neden olur. Yalnızca tek bir varyant olduğunda her kullanıcı aynı resmi alır. Bu nedenle, çok etkili bir şekilde önbelleğe alınabilir.

Diğer yandan, çok sayıda varyasyon varsa her bir varyant için başka bir önbellek girişi gerekir. Varyantın önbellek girişinin süresi dolduysa ve görüntünün kaynak sunucudan tekrar getirilmesi gerekiyorsa sunucu maliyetleri artabilir ve performansı düşürebilir.

Bunun dışında, HTML belgenizin boyutu her varyasyonla büyür. Her resim için birkaç kilobayt HTML gönderdiğinizi fark edebilirsiniz.

Resimleri Accept istek başlığına göre yayınlayın

Accept HTTP isteği başlığı, kullanıcının tarayıcısının hangi içerik türlerini anladığını sunucuya bildirir. Bu bilgiler, sunucunuz tarafından HTML yanıtlarınıza fazladan bayt eklemeden optimum 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çmek ve sunmak için sunucunuzun JavaScript arka ucuna ekleyebileceğiniz kodun basitleştirilmiş bir sürümüdür. Accept isteğinin başlığı image/avif içeriyorsa AVIF resmi yayınlanır. Aksi takdirde, Accept başlığı image/webp içeriyorsa WebP görüntüsü sunulur. Bu koşulların ikisi de doğru değilse JPEG resmi sunulur.

Hemen hemen her web sunucusu türünde Accept istek üst bilgisinin içeriğine dayalı yanıtları değiştirebilirsiniz. Örneğin, Apache sunucularındaki görüntü isteklerini, mod_rewrite kullanarak Accept başlığına göre yeniden yazabilirsiniz.

Bu, Görsel İçerik Yayınlama Ağı (CDN) davranışlarından farklıdır. Resim CDN'leri, resimleri optimize etmek ve kullanıcının cihazına ve tarayıcısına göre optimum biçimi göndermek için mükemmel çözümlerdir.

Önemli olan dengeyi bulmak, makul sayıda görsel adayı oluşturmak ve bu durumun kullanıcı deneyimi üzerindeki etkisini ölçmektir. Farklı resimler farklı sonuçlar verebilir ve her resme uygulanan optimizasyonlar, resmin sayfadaki boyutuna ve kullanıcılarınızın kullandığı cihazlara bağlıdır. Örneğin, tam genişlikte bir hero resim, e-ticaret ürün listeleme sayfasındaki küçük resimlerden daha fazla varyant gerektirebilir.

Geç yükleniyor

Tarayıcıya, resimler görüntü alanında göründüğünde loading özelliğini kullanarak resimleri geç yüklemesini bildirebilirsiniz. lazy özellik değeri, tarayıcıya resmi görüntü alanına girene (veya yakınına yakın olan) kadar indirmemesini bildirir. Bu, bant genişliğini koruyarak tarayıcının zaten 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 eşzamansız olarak çözülebileceğini söyler. Bu da muhtemelen diğer içeriğin oluşturulma süresinin iyileştirilmesidir. sync değeri, tarayıcıya resmin diğer içeriklerle aynı anda sunulması gerektiğini bildirir. Varsayılan auto değeri, tarayıcının kullanıcı için en iyi seçime karar vermesine olanak tanır.

Resim demoları

Bilginizi test etme

Sıradaki: Video performansı

Resimler web'de kullanılan en yaygın medya türü olsa da, performans söz konusu olduğunda aklınızda tutmanız gereken tek medya türü değildir. Video, web'de yaygın olarak kullanılan bir diğer medya türüdür ve performansla ilgili kendine has noktalara sahiptir. Bu kursun bir sonraki modülünde videoları optimize etme ve videoları verimli bir şekilde yüklemeyle ilgili bazı teknikleri keşfedeceksiniz.