Görseller genellikle web'deki en ağır ve en yaygın kaynaklardır. Bu nedenle, görsellerin optimize edilmesi web sitenizdeki performansı ö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 boyutta 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 sayfaya eklenebilir.
Resim boyutu
Resim kaynaklarını kullanırken yapabileceğiniz ilk optimizasyon, resmi doğru boyutta göstermektir. Bu durumda boyut terimi, resmin boyutlarını ifade eder. Başka değişken olmadığı varsayıldığında, 500 piksel x 500 piksel boyutlu bir kapsayıcıda gösterilen resim, 500 piksel x 500 piksel boyutunda olacak şekilde optimize edilir. Örneğin, 1.000 piksellik kare bir resim kullanmak, resmin gerekenden iki kat daha büyük olduğu anlamına gelir.
Ancak doğru resim boyutunu seçmeyle ilgili birçok değişken vardır. Bu nedenle, her durumda doğru resim boyutunu seçmek oldukça karmaşık bir görevdir. 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'ün ekranıyla yaklaşık olarak aynı kaldı.
Her şeyi daha yüksek çözünürlükte göstermek, metin ve resimleri önemli ölçüde küçültürdü. Tam olarak önceki boyutlarının yarısı kadar küçülürlerdi. Bunun yerine 1 piksel, 2 cihaz pikseli haline gelir. Bu değere cihaz piksel oranı (DPR) adı verilir. iPhone 4 (ve sonrasında piyasaya sürülen birçok iPhone modeli) 2 DPR'ye sahipti.
Önceki örneğe dönecek olursak cihazın DPR'si 2 ise ve resim 500 piksele 500 piksellik bir kapsayıcıda gösteriliyorsa artık 1.000 piksel boyutundaki kare resim (doğal boyut olarak adlandırılır) en uygun boyuttur. Benzer şekilde, cihazın DPR'si 3 ise 1.500 piksellik kare bir resim optimum boyuttadır.
srcset
<img> öğesi, tarayıcının kullanabileceği 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ı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 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ı söylemek için piksel yoğunluğu tanımlayıcısını kullanır.
Tüm bunlar basit görünse de bir sayfa için en uygun resmi seçerken dikkate alınması gereken tek faktör ekranın DPR'si değildir. Sayfanın düzeni de dikkate alınması gereken bir diğer faktördür.
sizes
Önceki çözüm yalnızca resmi tüm görüntü alanlarında 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, bir dizi kaynak boyutu belirtmenize olanak tanır. Her kaynak boyutu bir medya koşulu ve bir değerden oluşur. sizes özelliği, resmin CSS pikselleri cinsinden amaçlanan görüntüleme boyutunu açıklar. Tarayıcı, srcset genişlik tanımlayıcılarıyla birleştirildiğinde kullanıcının cihazı için en iyi 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"
>
Yukarıdaki HTML snippet'inde srcset özelliği, tarayıcının seçebileceği ve virgülle ayrılmış resim adaylarının listesini belirtir. Listedeki her aday, resmin URL'si ve ardından resmin doğal genişliğini belirten bir söz diziminden oluşur. Bir resmin doğal 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ünüm alanı genişliği 768 pikseli aşarsa resmin 500 piksel genişliğinde gösterilmesi talimatını alır. Daha küçük cihazlarda resim, 100vw veya tam görünüm alanı genişliğinde gösterilir.
Tarayıcı daha sonra bu bilgileri srcset resim kaynakları listesiyle birleştirerek en uygun resmi bulabilir. Örneğin, kullanıcının 3 DPR'ye sahip 320 piksel ekran genişliğinde bir mobil cihaz kullandığını varsayalım. Bu durumda resim 320 CSS pixels x 3 DPR = 960 device pixels boyutunda gösterilir. Bu örnekte, en yakın boyutlu resim, 1.000 piksel genişliğe (1000w) sahip olan image-1000.jpg olur.
Dosya biçimleri
Tarayıcılar, çeşitli 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. Bu sayede resim dosyanızın boyutu küçülür ve indirme işlemi daha kısa sürer. Resimleri modern biçimlerde sunarak bir kaynağın yükleme süresini kısaltabilirsiniz. Bu da Largest Contentful Paint (LCP) değerinin düşmesine neden olabilir.
WebP, tüm modern tarayıcılarda çalışan yaygın olarak desteklenen bir biçimdir. WebP, JPEG, PNG veya GIF'e kıyasla genellikle daha iyi sıkıştırma sağlar ve hem kayıplı hem de kayıpsız sıkıştırma sunar. WebP, kayıplı sıkıştırma kullanıldığında bile alfa kanalı şeffaflığını destekler. Bu özellik, JPEG codec'inde bulunmaz.
AVIF, daha yeni bir resim biçimidir ve WebP kadar yaygın olarak desteklenmese de tarayıcılarda oldukça iyi desteklenir. AVIF hem kayıplı hem de kayıpsız sıkıştırmayı destekler ve testler, bazı durumlarda JPEG'e 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) özellikleri de sunar.
Sıkıştırma
Resimlerle ilgili olarak iki tür sıkıştırma vardır:
Kayıplı sıkıştırma, nicemleme yoluyla görüntü doğruluğunu azaltarak çalışır ve kroma alt örnekleme kullanılarak ek renk bilgileri atılabilir. Kayıplı sıkıştırma, genellikle fotoğraflar veya benzer içeriklere sahip görüntüler olan, çok fazla gürültü ve renk içeren yüksek yoğunluklu resimlerde en etkilidir. Bunun nedeni, kayıplı sıkıştırma ile üretilen bozulmaların bu tür ayrıntılı görüntülerde fark edilme olasılığının çok daha düşük olmasıdır. Ancak kayıplı sıkıştırma, çizgi çizimleri gibi keskin kenarlar, benzer şekilde net 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.
Kayıpsız 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 pikseller arasındaki farka göre tanımlar. GIF, PNG, WebP ve AVIF resim biçimlerinde kayıpsız sıkıştırma kullanılır.
Resimlerinizi Squoosh, ImageOptim veya bir resim optimizasyonu hizmeti kullanarak sıkıştırabilirsiniz. Sıkıştırma işlemi sırasında tüm durumlar için uygun olan evrensel bir ayar yoktur. Önerilen yaklaşım, görüntü 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 optimizasyonu hizmetleri bunu sizin için otomatik olarak yapabilir ancak tüm kullanıcılar için finansal olarak uygun olmayabilir.
<picture> öğesi
<picture> öğesi, birden fazla resim adayı belirtme konusunda 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> öğesi içinde <source> öğelerini kullandığınızda AVIF ve WebP resimleri için destek ekleyebilir ancak tarayıcı modern biçimleri desteklemiyorsa daha uyumlu eski resim biçimlerine geri dönebilirsiniz. Bu yaklaşımla, tarayıcı eşleşen ilk <source> öğesini seçer. Resmi bu biçimde oluşturabiliyorsa bu resmi kullanır. Aksi takdirde tarayıcı, bir sonraki belirtilen <source> öğesine geçer. Yukarıdaki HTML snippet'inde, AVIF biçimi WebP biçimine göre önceliklidir. AVIF veya WebP desteklenmiyorsa JPEG biçimine geri dönülür.
<picture> öğesi, içine yerleştirilmiş bir <img> öğesi gerektirir. alt, width ve height özellikleri <img> üzerinde tanımlanır ve hangi <source> seçilirse seçilsin kullanılır.
<source> öğesi media, srcset ve sizes özelliklerini de destekler. Daha önce verilen <img> örneğine benzer şekilde, bunlar tarayıcıya farklı görünüm pencerelerinde hangi görüntünün 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, cihazın DPR'si medya koşulu olarak kullanılıyor. 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, görüntü alanı 768 pikselden geniş olan cihazlarda seçilen resim adayının 500 piksel genişliğinde görüntülendiğini tarayıcıya bildirir. Daha küçük cihazlarda bu, görünüm alanının tamamını kaplar. media ve srcset özelliklerini birleştirerek hangi resmin kullanılacağı konusunda daha ayrıntılı kontrol sahibi olabilirsiniz.
Bu durum, aşağıdaki tabloda gösterilmektedir. Tabloda, çeşitli görüntü alanı genişlikleri ve cihaz piksel oranları değerlendirilmektedir:
| Görüntü alanı genişliği (piksel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1.920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
DPR'si 1 olan cihazlar, image-500.jpg resmini indirir. Bu cihazlar arasında, resmi 500 piksel genişliğinde bir dış boyutta görüntüleyen çoğu masaüstü kullanıcısı da yer alır. Öte yandan, DPR'si 3 olan mobil kullanıcılar, masaüstü cihazlarda kullanılanla aynı ve potansiyel olarak daha büyük bir image-1500.jpg 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, yüksek DPR'ye sahip geniş cihazlarda farklı resimler kullanmak için <picture> öğesi ek bir <source> öğesi içerecek şekilde ayarlanır:
| Görüntü alanı genişliği (piksel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 1000-sm.jpg | 1000-sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1.920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Bu ek sorguyla, image-1000-sm.jpg ve image-1500-sm.jpg öğelerinin küçük görünüm pencerelerinde gösterildiğini görebilirsiniz. Bu ek bilgiler, sıkıştırma bozulmaları bu boyutta ve yoğunlukta çok görünür olmadığından resimleri daha fazla sıkıştırmanıza olanak tanır. Ayrıca masaüstü cihazlarda resim kalitesinden ödün vermez.
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: 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>
Yukarıdaki 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, 3 DPR'ye sahip 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 varyasyonu ve biçimle karşılaşabilirsiniz. Önceki örnekte, her boyut için varyasyonlar kullanılıyor ancak AVIF ve WebP hariç tutuluyor. Kaç varyantınız olmalı? Birçok mühendislik sorununda olduğu gibi, bu sorunun cevabı da "duruma göre değişir"dir.
En uygun sonucu elde etmek için mümkün olduğunca çok varyant kullanmak cazip olsa da her ek resim varyantı maliyetlidir ve tarayıcı önbelleğinin daha az verimli kullanılmasına neden olur. 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 varyasyon varsa her varyasyon için ayrı bir önbellek girişi gerekir. Varyantın önbellek girişi 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 artar. Her resim için birden fazla kilobaytlık HTML gönderiyor olabilirsiniz.
Accept istek başlığına göre resim yayınlama
Accept HTTP istek üst bilgisi, sunucuya kullanıcının tarayıcısının hangi içerik türlerini anladığını bildirir. Bu bilgiler, sunucunuz tarafından HTML yanıtlarınıza ekstra 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');
Yukarıdaki 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.
İstek Accept üstbilgisinde image/avif varsa AVIF resmi sunulur. Aksi takdirde, Accept üst bilgisi image/webp içeriyorsa WebP resmi sunulur. Bu koşullardan hiçbiri geçerli değilse JPEG resmi sunulur.
Accept istek başlığının içeriğine göre yanıtları neredeyse her tür web sunucusunda değiştirebilirsiniz. Örneğin, mod_rewrite kullanarak Apache sunucularında Accept başlığına göre görüntü isteklerini yeniden yazabilirsiniz.
Bu, görüntü içerik yayınlama ağında (CDN) göreceğiniz davranıştan farklı değildir. 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 resim adayı oluşturmak ve kullanıcı deneyimi üzerindeki etkiyi ölçmektir. Farklı resimler farklı sonuçlar verebilir. 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 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, resimler görünüm alanında göründüğünde tembel yükleme yapmasını söyleyebilirsiniz. lazy özellik değeri, tarayıcıya resim görünüm alanında (veya görünüm alanına yakın) olana kadar indirmemesi talimatını verir. Bu sayede bant genişliği tasarrufu sağlanır ve tarayıcı, görüntü alanında bulunan kritik içeriği oluşturmak için ihtiyaç duyduğu kaynaklara öncelik verebilir.
Kod çözme özelliği
decoding özelliği, tarayıcıya resmi nasıl çözeceğini bildirir.
Üç olası değer vardır:
async, tarayıcıya görüntünün eşzamansız olarak çözümlenebileceğini bildirir. Bu da diğer içeriklerin oluşturulma süresini kısaltabilir.sync, tarayıcıya resmin diğer içeriklerle aynı anda sunulması gerektiğini bildirir.auto(varsayılan), tarayıcının kullanıcı için en iyi olanı belirlemesine olanak tanır.
DOM'a resim eklerken JavaScript'te HTMLImageElement örneğinde decode yöntemini kullanabilirsiniz.
Resim demosu
Bilginizi test etme
Hangi resim biçimleri kayıpsız sıkıştırmayı destekler?
Hangi resim biçimleri kayıplı sıkıştırmayı destekler?
Genişlik tanımlayıcısı (örneğin, 1000w), srcset özelliğinde belirtilen bir resim adayı hakkında tarayıcıya ne söyler?
sizes özelliği, tarayıcıya uygulandığı <img> öğesi hakkında ne söyler?
<img> öğesinin srcset içinde belirtilen hangi adayın yükleneceğini ifade eden mantık.
<img> öğesinin srcset özelliğinden yüklenecek resmin doğal genişliği.
Sıradaki konu: Video performansı
Resimler web'de kullanılan en yaygın medya türü olsa da performans söz konusu olduğunda dikkate almanız gereken tek tür değildir. Video, web'de yaygın olarak kullanılan bir başka medya türüdür ve kendi performans değerlendirmeleriyle birlikte gelir. Bu kursun bir sonraki modülünde, videoları optimize etme ve verimli bir şekilde yükleme ile ilgili bazı teknikleri inceleyin.