Duyarlı resimler yayınlama

Katie Hempenius
Katie Hempenius

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.