Mobil cihazlara masaüstü boyutlu resimler sunarken, gerekenden 2-4 kat daha fazla veri kullanılabilir. Resimler için "herkese uygun tek boyut" yaklaşımı yerine farklı cihazlara farklı boyutlarda resimler sunun.
Uyumlu resimler ve Core Web Vitals
Duyarlı resimler yayınladığınızda, kullanıcının cihazının görüntüleme özelliklerini değerlendirir ve bu ölçütlere göre görüntülenmek için en uygun resim önerileri grubundan birini seçersiniz. Daha önce de belirtildiği gibi sonuç, fayda sağlamayacak cihazlara çok fazla görüntü verisi göndermek yerine cihaz için uygun boyutlu bir görsel sunmanızdır. Telefon ve tablet gibi daha küçük cihazlar için bu, dizüstü bilgisayarlar gibi daha büyük ekranlı cihazlara kıyasla daha az veri kullanımı anlamına gelir.
Daha hızlı resim yüklemenin etkileri, sayfanızın Largest Contentful Paint (LCP) özelliğini de kapsayabilir. Örneğin, sayfanızın LCP öğesi bir resimse bu LCP adayının kaynak yükleme süresini azaltmış olursunuz.
Daha düşük kaynak yükleme süreleri, LCP görüntüsü için yükleme süresini kısaltır ve sayfanın LCP puanını iyileştirir. Daha düşük bir LCP, kullanıcıların sitenizin daha hızlı yüklendiğini, özellikle de sayfa yüklenirken görüntü alanında görünen en büyük içerik parçasını algılayacağı anlamına gelir. Duyarlı resimler sunmak, sayfadaki diğer kaynaklar için bant genişliği anlaşmazlığı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ı ve derleme komut dosyaları ve araçlarla kolayca entegre edilir. Öte yandan, ImageMagick tamamen komut satırından kullanıldığından, tek seferlik resim yeniden boyutlandırması için uygundur.
keskin
Keskin özelliğini 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ğe ve 200 piksel yüksekliğe 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 yazılmasını gerektirir.
Diğer seçenekler
Thumbor (açık kaynak) ve Cloudinary gibi resim hizmetlerine de göz atmaya değer. Resim hizmetleri, isteğe bağlı olarak duyarlı resimler (ve görüntü işleme) sunar. Thumbor, bir sunucuya yüklenerek ayarlanır. Cloudinary, bu ayrıntılarla sizin için ilgilenir ve sunucu kurulumu gerektirmez. Her iki yöntem de duyarlı resimler oluşturmanın kolay yollarıdır.
Birden fazla görüntü sürümü sunma
Birden çok görüntü 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
özelliklerinin tamamı, 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. Tarayıcı bu özellikleri desteklemiyorsa src
özelliği tarafından belirtilen kaynağı yüklemeye geri döner.
"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 genişlik açıklayıcıları kullanılmaktadır.
480w
, tarayıcıya flower-small.jpg
ürününün 480 piksel genişliğinde olduğunu, 1080w
ise tarayıcıya flower-large.jpg
boyutunun 1.080 piksel olduğunu bildiren bir genişlik tanımlayıcısıdır.
"Genişlik açıklayıcı" kulağa hoş geliyor, ancak sadece tarayıcıya bir resmin genişliğini bildirmenin bir yoludur. Bu sayede tarayıcının, boyutunu belirlemek için resmi indirme ihtiyacını ortadan kaldırı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, tarayıcıya resmin gösterildiği zaman ne kadar geniş olacağını bildirir. Ancak boyutlar özelliğinin ekran boyutu üzerinde hiçbir etkisi yoktur. 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) kullanır.
Tarayıcı "sizes
" özelliğini tanımazsa "src
" özelliği tarafından belirtilen resmi yükler. (Tarayıcılar "sizes
" ve "srcset
" özelliklerini aynı anda desteklediğinden tarayıcı her iki özelliği de destekler veya hiçbirini desteklemez.)
Ekstra Kredi: Fazlalı 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) Ekstra 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ü görüntüler sunma uygulamasıdır (aynı resmin farklı sürümleri yerine). 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ırılması gereken resimleri listeler.