Resim performansı

Görseller genellikle web'deki en yoğun ve en yaygın kaynaktır. Kullanıcı resimleri optimize etmek, web sitenizin performansını önemli ölçüde artırabilir. Çoğu durumda, resimleri optimize etmek, daha az bayt olabilir, ancak yine de temel alarak kullanıcıya gönderilen bayt miktarını Kullanıcının cihazı için uygun boyutlu resimler sunmak.

Resimler, bir sayfaya <img> veya <picture> öğeleri kullanılarak eklenebilir veya CSS background-image mülkü

Resim boyutu

Resim kaynaklarını kullanmak için gerçekleştirebileceğiniz ilk optimizasyon resmin doğru boyutta görüntülenmesini sağlar. Bu örnekte, boyut terimi, Resmin boyutları. Başka bir değişken dikkate alınmadan, bir kapsayıcının 500 piksele 500 piksele 500 piksele 500 piksele kadar 500 piksel. Örneğin, 1.000 piksellik bir kare resim kullanmak, resmin iki kat daha büyüktür.

Ancak, uygun resim boyutunu seçmek için kullanılan birçok değişken vardır. her durumda uygun resim boyutunu seçme işini karmaşıktır. 2010'da iPhone 4 piyasaya sürüldüğünde, ekran çözünürlüğü (640x960), iPhone 3'ün (320x480) iki katıydı. Ancak fiziksel boyut iPhone 4'ün ekranı yaklaşık olarak iPhone 3'le aynı kaldı.

Her şeyi daha yüksek çözünürlükte görüntülerseniz metin ve resimler üretilirdi daha küçük (tam olarak belirtmek gerekirse önceki boyutlarının yarısı). Bunun yerine, 2 cihaz pikseli oldu. Buna cihaz piksel oranı (DPR) denir. İlgili içeriği oluşturmak için kullanılan iPhone 4'te ve sonrasında piyasaya sürülen birçok iPhone modelinin DPR'si 2'ydi.

Cihazın DPR'si 2 ise ve resmin değeri ise önceki örneğe dönelim. 500 x 500 piksellik bir kapsayıcıda, ardından 1.000 piksellik bir karede görüntülenir. (içsel boyut olarak bilinir) artık optimum boyuttur. Benzer bir şekilde, cihazın DPR'si 3 ise ideal boyut 1.500 piksellik kare bir resim olacaktır.

srcset

<img> öğesi, srcset özelliğini destekler. Bu özellik, tarayıcının kullanabileceği olası görsel kaynaklarının listesi. Belirtilen her bir resim kaynağı Resim URL'sini ve bir genişlik veya piksel yoğunluğu tanımlayıcısını 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ıya ipucu vermek için piksel yoğunluğu tanımlayıcısını kullanır image-500.png uygulamasını cihazlarda DPR'si 1, image-1000.jpg olan cihazlarda kullanmak için DPR'si 2 olan cihazlarda 2 ve image-1500.jpg olarak görünür.

Tüm bu işlemler kesilmiş ve kurumuş gibi görünse de ekranın DPR'si tek başına yeterli değildir. göz önünde bulundurmayan ve bu nedenle en iyi performansı gösteren reklamverenlerin Sayfanın düzen de göz önünde bulundurulması gereken bir diğer unsur.

sizes

Önceki çözüm yalnızca resmi aynı CSS pikselinde görüntülediğinizde çalışır boyuta sahip olması gerekir. Çoğu durumda, bir sayfanın düzeni ve kapsayıcının kullanıcının cihazına bağlı olarak değişir.

sizes özelliği, her bir kaynak boyutu grubunu belirtmenize olanak tanır. kaynak boyutu, bir medya koşulu ve değerden oluşur. sizes özelliği değeri, resmin amaçlanan görüntüleme boyutunu CSS pikselinde tanımlar. Birleştirildiğinde srcset genişlik tanımlayıcılarıyla, tarayıcı hangi resim kaynağının kullanıcının cihazı için en uygun seçenektir.

<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 adayları virgülle ayırarak gösterir. Şuradaki her aday: liste görselin URL'sinden oluşur. Ardından, resmin resmin iç genişliği. Bir resmin gerçek boyutu, boyutlarıdır. Örneğin, Örneğin, 1000w tanımlayıcısı, resmin gerçek genişliğinin 1000 piksel genişliğinde.

Tarayıcı, bu bilgileri kullanarak sizes içindeki medya koşulunu değerlendirir. özelliğinin değeri (bu örnekte), cihazın görüntü alanının genişliğinin 768 pikseli aştığında, resim 500 piksel genişlikte görüntülenir. Daha küçük modellerde cihazlarda, resim 100vw veya tam görüntü alanı genişliğinde görüntülenir.

Daha sonra tarayıcı bu bilgileri srcset görsel listesi ile birleştirebilir. kaynak türlerini kullanabilirsiniz. Örneğin, kullanıcı cep telefonu kullanıyorsa 320 piksel ekran genişliğinde ve 3 DPR'ye sahip cihazda resim gösteriliyor. Yer: 320 CSS pixels x 3 DPR = 960 device pixels. Bu örnekte, resim boyutu 1.000 içsel genişliğe sahip image-1000.jpg olur piksel (1000w).

Dosya biçimleri

Tarayıcılar birkaç farklı resim dosyası biçimini destekler. Modern resim biçimleri WebP ve AVIF, PNG veya JPEG'den daha iyi sıkıştırma sağlayabilir. Bu nedenle, resim dosyasının boyutu küçültülür ve bu nedenle indirme işlemi daha az zaman alır. Yayınlayarak kullanarak kaynağın yükleme süresini azaltabilirsiniz. Bu da Largest Contentful Paint (LCP) daha düşük olur.

WebP, tüm modern tarayıcılarda çalışan ve geniş çapta desteklenen bir biçimdir. WebP genellikle JPEG, PNG veya GIF'ten daha iyi sıkıştırmaya sahiptir ve hem kayıp hem de kayıpsız sıkıştırma. WebP aynı zamanda alfa kanalı şeffaflığını da destekler. kayıplı sıkıştırmayı kullanır. Bu, JPEG codec'in sunmadığı bir özelliktir.

AVIF, yeni bir resim biçimidir ancak WebP kadar yaygın olarak desteklenmese de tarayıcılarda makul derecede iyi bir destekten yararlanmaktadır. AVIF, göstermiştir ve testler, 2008'e kadar mobil cihazlarda JPEG ile karşılaştırıldığında. AVIF ayrıca Geniş Renk Gamutu (WCG) ve Yüksek Dinamik Aralık (HDR) özellikleri.

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, nicelleştirme yoluyla görüntü doğruluğunu azaltarak ve ek renk bilgileri renk alt örneklemesi kullanılarak silinebilir. Kayıplı sıkıştırma, en çok gürültüye sahip yüksek yoğunluklu resimlerde etkili olur ve renkler (genellikle benzer içeriğe sahip fotoğraflar veya görüntüler) Çünkü kayıplı sıkıştırma ile üretilen yapıların fark edilme olasılığı çok daha düşüktür resimlere yer verebilirsiniz. Ancak kayıplı sıkıştırma, Çizgi sanatı, benzer şekilde keskin ayrıntılar gibi keskin kenarlar içeren görüntüler metin. JPEG, WebP ve AVIF resimlere kayıplı sıkıştırma uygulanabilir.

Kayıpsız sıkıştırma, veri içermeyen bir resmi sıkıştırarak dosya boyutunu azaltır kaybetmezsiniz. Kayıpsız sıkıştırma, bir pikseli, ile piksel arasındaki farka göre komşu pikseller. GIF, PNG, WebP ve AVIF resim biçimleri

Resimlerinizi Squoosh, ImageOptim veya bir resim kullanarak sıkıştırabilirsiniz optimizasyon hizmeti veriyor. Sıkıştırma işleminde uygun evrensel bir ayar yoktur uygun olmalıdır. Önerilen yaklaşım, farklı düzeylerde resim kalitesi ve kalitesi arasında iyi bir uzlaşma bulana kadar dosya boyutu. Bazı gelişmiş resim optimizasyonu hizmetleri bunu sizin yerinize yapabilir otomatik olarak, ancak tüm kullanıcılar için mali açıdan uygun olmayabilir.

<picture> öğesi

<picture> öğesi, birden çok öğe belirtirken size daha fazla esneklik sağlar resim önerileri:

<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> öğe kullandığınızda AVIF ve WebP görselleri destekleniyor ancak daha uyumlu olan eski görsel yeni bir dosya biçimini kullanmalısınız. Bu yaklaşımla tarayıcı, eşleşen belirtilen ilk <source> öğeyi seçer. Yapabiliyorsa oluşturmak için o resmi kullanır. Aksi halde, tarayıcı belirtilen sonraki <source> öğesine geçer. Önceki HTML'de WebP biçimine göre öncelikli olarak AVIF biçimi JPEG biçimi (AVIF veya WebP desteklenmiyorsa)

Bir <picture> öğesi, içine yerleştirilmiş bir <img> öğesi gerektirir. İlgili içeriği oluşturmak için kullanılan alt, width ve height özellikleri <img> üzerinde tanımlanıyor ve kullanılıyor hangi <source>'nin seçildiğine bakılmadan gösterilir.

<source> öğesi media, srcset ve sizes öğelerini de destekler özellikleri hakkında daha fazla bilgi edinin. Önceki <img> örneğine benzer şekilde, bunlar farklı görüntü alanlarında seçilecek resmi oluşturmak için tarayıcı.

<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 şundan büyük olan cihazlar: ilk <source> öğesini kullanır. <source> öğesi tarayıcıya, 768 pikselden geniş bir görüntü alanına sahip cihazlarda seçilen resim adayı 500 piksel genişliğinde görüntülenir. Daha küçük cihazlarda görüntü alanının genişliğini kaplar. media ve srcset birleştirerek özellikleri sayesinde, hangi resmin kullanılacağı konusunda daha ayrıntılı kontrol sahibi olabilirsiniz.

Bu, aşağıdaki tabloda gösterilmiştir. Çeşitli görüntü alanı genişlikleri ve cihaz piksel oranları değerlendirilir:

DPR'si 1 olan cihazlar, çoğu dahil olmak üzere image-500.jpg resmini indirir. masaüstü kullanıcıları (resmi 500 piksel genişliğinde dışsal boyutta görüntüleyen kullanıcılar). Şu tarihte: DPR'si 3 olan mobil kullanıcılar, mobil cihazlarda potansiyel olarak daha büyük bir image-1500.jpg: Masaüstü cihazlarda kullanılan DPR'nin aynısı 3'tü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 fazladan bir Yüksek DPR'ye sahip geniş cihazlarda farklı resimler kullanmak için <source> öğesi:

Bu ek sorguyla, image-1000-sm.jpg ve image-1500-sm.jpg, küçük görüntü alanlarında görüntülenir. Bu ekstra bilgiler resimler daha da sıkıştırılır, çünkü sıkıştırma yapıları yüksek oranda resim kalitesinden ödün vermeden bu boyut ve yoğunlukta görünür. en iyi uygulamaları paylaşacağız.

Alternatif olarak da srcset ve media özelliklerini ayarlayarak küçük görüntü alanlarında büyük resimler sunmak:

<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ı sayısı. Mobil cihazda sunulan resimler sınırlıdır DPR'si 3 olan cihazlarda bile /image-500.jpg veya /image-1000.jpg adresine.

Karmaşıklık nasıl yönetilir?

Duyarlı resimlerle çalışırken kendinizi farklı kılan, boyutları ve biçimleri hakkında bilgi edinebilirsiniz. Yukarıdaki örnekte, varyasyonlar her boyut için kullanılır ancak AVIF ve WebP'yi hariç tutar. Kaç varyant kullanmanız gerekir? neler? Birçok mühendislik problemi gibi, cevap da "değişken" olma eğilimindedir.

En iyi uyum için çok sayıda varyasyon bulundurmak cazip görünse de, Her ek resim varyantının bir maliyeti vardır ve kullanır. Yalnızca bir varyant olduğunda her kullanıcı aynı resmi alır. önbellekte bulunmasını sağlar.

Diğer yandan, çok sayıda varyasyon varsa her varyant için başka bir varyant gerekir. önbellek girişi. varyantın önbellek girişinin süresi doldu ve resmin şuradan getirilmesi gerekiyor: kaynak sunucu.

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

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

Accept HTTP istek başlığı, sunucuya anlar. Bu bilgiler, sunucunuz tarafından en uygun resim biçimini kullanabilirsiniz.

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, ekleyebileceğiniz kodun basitleştirilmiş bir sürümüdür en uygun resim biçimini seçip sunmak için sunucunuzun JavaScript arka ucunu kullanın. İstek Accept başlığında image/avif varsa AVIF resmi sunulur. Aksi takdirde, Accept üstbilgisi image/webp içeriyorsa WebP resmi servis edilir. Bu koşulların ikisi de geçerli değilse JPEG resmi sunulur.

Yanıtları, Accept istek başlığının içeriğine göre değiştirebilirsiniz hemen hemen her tür web sunucusu için geçerlidir. Örneğin, resim isteklerini yeniden yazabilirsiniz Apache sunucularında mod_rewrite kullanarak Accept üstbilgisini temel alır.

Bu, Resim İçeriği Yayınlama Ağı'nda görebileceğiniz davranıştan (CDN) kapsamındadır. Resim CDN'leri, resimleri optimize etmek ve görselleri göndermek için mükemmel çözümlerdir. cihazına ve tarayıcısına göre en uygun biçimi sağlar.

Önemli olan dengeyi bulmak, makul sayıda görüntü seçeneği oluşturmaktır. ve kullanıcı deneyimi üzerindeki etkisini ölçmenizi sağlar. Farklı resimler ve her resme uygulanan optimizasyonlar orijinal resmin sayfa boyutu ve kullanıcılarınızın kullandığı cihazlar. Örneğin, tam genişlikte hero resim, bir E-ticaret ürün listeleme sayfası.

Geç yükleme

Tarayıcıya, görüntü alanını loading özelliğini kullanarak değiştirebilirsiniz. lazy özellik değeri, görüntü alanına girene (veya görüntü alanına yakın olana) kadar resmi indirmemesi için tarayıcının tüm özelliklerini devre dışı bırakın. Bu Bant genişliğinden tasarruf ederek tarayıcının ihtiyacı olan kaynaklara öncelik vermesini sağlar zaten görüntü alanında bulunan önemli içeriği oluşturabilir.

decoding

decoding özelliği, tarayıcıya resmin kodunu nasıl çözmesi gerektiğini bildirir. CEVAP async değeri, tarayıcıya resmin kodunun eşzamansız olarak çözülebileceğini belirtir. diğer içerikleri oluşturmak için harcanan süreyi kısaltabilir. sync değeri, Tarayıcıda, resmin diğer içerikle aynı anda sunulması gerekir. Varsayılan auto değeri, tarayıcının belirtir.

Resim demoları

Bilginizi test etme

Sıradaki: Video performansı

Görseller web'de kullanılan en yaygın medya türü olsa da dikkate almanız gereken en önemli kaynaktır. Video web'de yaygın olarak kullanılan başka bir medya türüdür ve kendine ait dikkate almanız gerekir. Bu kursun bir sonraki modülünde, teknikler ve bunların verimli şekilde nasıl yükleneceği ile ilgili daha fazla bilgiyi aşağıda bulabilirsiniz.