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:
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:
Görüntü Alanı Genişliği (piksel) | 1 DPR | 1,5 DPR | 2 YPR | 3 Gün Başına |
---|---|---|---|---|
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 |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
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:
Görüntü Alanı Genişliği (piksel) | 1 DPR | 1,5 DPR | 2 YPR | 3 Gün Başına |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.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 |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
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
Hangi resim biçimleri kayıpsız sıkıştırmayı destekler?
Hangi resim biçimleri kayıp sıkıştırmayı destekler?
Genişlik tanımlayıcısı (örneğin, 1000w
) ne anlama gelir?
srcset
öğesinde belirtilen bir resim adayıyla ilgili tarayıcı
özelliğinin değeri nedir?
sizes
özelliği, tarayıcıya bir
Uygulandığı <img>
öğesi mi?
<img>
öğesinin srcset
öğesi yüklenmelidir.
kullanıcının mevcut görüntü alanının boyutlarına göre değişiklik gösterir.
<img>
öğesinin srcset
özelliği.
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.