Mobil cihazlara masaüstü boyutlu resimler sunarken, gerekenden 2-4 kat daha fazla veri kullanılabilir. Farklı cihazlara farklı resim boyutları sunarak kullanıcı deneyimini iyileştirmek için bu sayfadaki yönergeleri uygulayın.
Uyumlu resimler ve Core Web Vitals
Duyarlı resimler sunduğunuzda sayfanız, kullanıcının cihazının görüntüleme özelliklerini değerlendirir ve bu ölçütlere göre görüntülenmesi en uygun resim önerileri grubundan birini seçer. Bu yöntem, çoğunlukla daha küçük ekranlı cihazlara daha küçük resimler sunarak kullanıcılarınızın veri tasarrufuna olanak tanır.
Daha hızlı resim yüklemenin etkileri, sayfanızın Largest Contentful Paint (LCP) değerine de uzanabilir. Örneğin, sayfanızın LCP öğesi bir resimse bu öğeyi duyarlı şekilde sunmak kaynak yükleme süresini azaltabilir.
Daha düşük kaynak yükleme süreleri, LCP görüntüsü için yükleme süresini kısaltarak sayfanızın LCP puanını iyileştirir. Daha düşük bir LCP, kullanıcıların sitenizin daha hızlı yüklendiğini ve özellikle de en önemli içeriğinin (LCP öğesi) daha hızlı yüklendiğini görür. Duyarlı resimler yayınlamak, sayfadaki diğer kaynaklar için bant genişliği çakışmasını da azaltarak sayfanızın genel olarak yüklenme hızını iyileştirebilir.
Resimleri yeniden boyutlandırma
En popüler resim yeniden boyutlandırma araçlarından ikisi, sharp npm paketi ve ImageMagick CLI aracıdır.
Keskin paket, resimlerin yeniden boyutlandırılmasını (ör. web sitenizdeki tüm videolar için birden fazla boyutta küçük resim oluşturma) otomatik hale getirmek için iyi bir seçenektir. Hızlıdır, derleme komut dosyaları ve araçlarla iyi bir şekilde entegre olur. ImageMagick tamamen komut satırından çalıştırıldığı için tek seferlik resim yeniden boyutlandırma için daha uygundur.
keskin
Sharp'ı Düğüm komut dosyası olarak kullanmak için bu kodu projenizde ayrı bir komut dosyası olarak kaydedin ve ardından görüntülerinizi dönüştürmek için çalıştırın:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Bir resmi orijinal boyutunun% 33'ü oranında yeniden boyutlandırmak için terminalinizde aşağıdaki komutu çalıştırın:
convert -resize 33% flower.jpg flower-small.jpg
Bir resmi 300 piksel genişliğinde ve 200 piksel yüksekliğindeki bir alana sığacak şekilde yeniden boyutlandırmak için aşağıdaki komutu çalıştırın:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Kaç resim sürümü oluşturmalısınız?
Bu soruya verilecek tek bir "doğru" cevap yoktur. Ancak, genelde 3 ila 5 farklı boyutta resim sunulur. Daha fazla resim boyutu sunmak performans açısından daha iyidir ancak sunucularınızda daha fazla yer kaplar ve biraz daha fazla HTML yazmanızı gerektirir.
Diğer seçenekler
Thumbor (açık kaynak) ve Cloudinary gibi resim hizmetlerine de göz atmaya değer. Her ikisi de isteğe bağlı görüntü değiştirme olanağı sunan duyarlı resimler oluşturmanın basit yollarıdır. Thumbor'ı kurmak için sunucunuza yükleyin. Cloudinary tüm ayrıntıları sizin yerinize halleder ve sunucu kurulumu gerektirmez.
Birden fazla görüntü sürümü sunma
Birden fazla resim sürümü belirttiğinizde, tarayıcı kullanılacak en iyi sürümü seçer:
| Önce | Sonra |
|---|---|
| <img src="çiçek-büyük.jpg"> | <img src="çiçek-büyük.jpg" srcset="çiçek-küçük.jpg 480w, çiçek-büyük.jpg 1080w"dimension="50vw"> |
<img> etiketinin src, srcset ve sizes özellikleri, bu nihai sonuca ulaşmak için etkileşime girer.
"src" özelliği
src özelliği, bu kodun srcset ve sizes özelliklerini desteklemeyen tarayıcılarda çalışmasını sağlar. Bu tarayıcılar, src özelliğinde belirtilen kaynağı tekrar yükler.
"srcset" özelliği
srcset özelliği, görüntü dosya adlarının ve bunların genişlik veya yoğunluk tanımlayıcılarının virgülle ayrılmış bir listesidir.
Bu örnekte, tarayıcıya bir resmin ne kadar geniş olduğunu bildiren genişlik açıklayıcıları kullanılmaktadır. Böylece, bulmak için resmi indirmek gerekmez. 480w, tarayıcıya flower-small.jpg boyutunun 480 piksel genişliğinde olduğunu bildiren bir genişlik göstergesidir. 1080w, tarayıcıya flower-large.jpg boyutunun 1.080 piksel genişliğinde olduğunu belirten bir genişlik tanımlayıcısıdır.
Ekstra Kredi: Farklı resim boyutları sunmak için yoğunluk tanımlayıcıları hakkında bilgi sahibi olmanız gerekmez. Ancak yoğunluk tanımlayıcılarının nasıl çalıştığını merak ediyorsanız Çözünürlük Geçişi kod laboratuvarına göz atın. Yoğunluk tanımlayıcıları, cihazın piksel yoğunluğuna bağlı olarak farklı görüntüler sunmak için kullanılır.
"Bedenler" özelliği
Boyut özelliği, resmin görüntülendiğinde tarayıcıya resmin ne kadar geniş olacağını bildirir ancak resmin ekran boyutunu etkilemez. Bu nedenle bunun için yine de CSS'ye ihtiyacınız vardır.
Tarayıcı, hangi resmin yükleneceğini belirlemek için bu bilgilerle birlikte kullanıcının cihazı hakkında sahip olduğu bilgileri (boyutları ve piksel yoğunluğu dahil) kullanır.
Tarayıcı "sizes" özelliğini tanımazsa "src" özelliğiyle belirtilen resmi yüklemeye devam eder. (sizes ve srcset aynı anda kullanıma sunulduğundan her tarayıcı her iki özelliği de destekler veya ikisini de desteklemez.)
Ekstra Kredi: Daha gösterişli olmak istiyorsanız birden fazla alan boyutu belirtmek için boyut özelliğini de kullanabilirsiniz. Bu, farklı görüntü alanı boyutları için farklı düzenler kullanan web sitelerine uygundur. Bunu nasıl yapacağınızı öğrenmek için bu birden fazla slot kodu örneğine göz atın.
(Daha fazla) Ek kredi
Hâlihazırda listelenen tüm ekstra kredilere (resimler karmaşıktır!) ek olarak, bu kavramları sanat yönetimi için de kullanabilirsiniz. Sanat yönetimi, farklı görüntü alanlarına tamamen farklı görünümlü resimler (aynı resmin farklı sürümleri yerine) sunma uygulamasıdır. Daha fazla bilgiyi Resimli Yönlendirme kod laboratuvarında bulabilirsiniz.
Doğrula
Duyarlı resimleri uyguladıktan sonra, hiçbir resmi kaçırmadığınızdan emin olmak için Lighthouse'u kullanabilirsiniz. Lighthouse Performans Denetimi'ni (Lighthouse > Seçenekler > Performans) çalıştırın ve Resimleri uygun şekilde boyutlandır denetiminin sonuçlarını bulun. Bu sonuçlar, yeniden boyutlandırmanız gereken resimleri listeler.