Mobil cihazlara masaüstü boyutlu resimler sunmak, gerekenden 2-4 kat daha fazla veri kullanımına neden olabilir. Farklı cihazlara farklı resim boyutları sunarak kullanıcı deneyimini iyileştirmek için bu sayfadaki yönergeleri uygulayın.
Duyarlı 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üleme için ideal olan resim adaylarından birini seçer. Bu sayede, özellikle küçük ekranlı cihazlara daha küçük resimler sunarak kullanıcılarınız için veri tasarrufu sağlarsınız.
Resimlerin daha hızlı yüklenmesi, sayfanızı etkileyen Largest Contentful Paint (LCP) metriğini de etkileyebilir. Örneğin, sayfanızı oluşturan LCP öğesi bir resimse bu öğeyi duyarlı bir şekilde yayınlamak kaynak yükleme süresini azaltabilir.
Kaynak yükleme süreleri ne kadar kısa olursa LCP resminin yükleme süresi de o kadar kısa olur. Bu da sayfanızı LCP puanını iyileştirir. Daha düşük bir LCP, kullanıcıların sitenizi daha hızlı yüklenirken, özellikle de en önemli içeriğini (LCP öğesi) daha hızlı yüklenirken göreceği anlamına gelir. Duyarlı resimler yayınlamak, sayfadaki diğer kaynaklar için bant genişliği anlaşmazlığını da azaltabilir. Bu da sayfanızı genel olarak daha hızlı yüklemenizi sağlayabilir.
Resimleri yeniden boyutlandırma
En popüler resim boyutlandırma araçlarından ikisi sharp npm paketi ve ImageMagick CLI aracıdır.
Keskin paket, resim boyutunu otomatik olarak ayarlamak için iyi bir seçimdir (ör. web sitenizdeki tüm videolar için birden fazla boyutta küçük resim oluşturma). Hızlıdır ve derleme komut dosyalarıyla ve araçlarıyla iyi entegre olur. ImageMagick, tamamen komut satırından çalıştığı için tek seferlik resim boyutlandırma için daha kullanışlıdır.
keskin
sharp'ı Node komut dosyası olarak kullanmak için bu kodu projenizde ayrı bir komut dosyası olarak kaydedin ve ardından resimlerinizi 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'üne 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ğinde 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ç görsel sürümü oluşturmanız gerekir?
Bu sorunun tek bir "doğru" cevabı yoktur. Ancak bir resmin 3-5 farklı boyutunu yayınlamak yaygın bir durumdur. Daha fazla resim boyutu sunmak performans için 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 hizmetlerini de incelemenizi öneririz. Her ikisi de isteğe bağlı görüntü değiştirme olanağı sunan duyarlı resimler oluşturmanın kolay bir yoludur. Thumbor'u kurmak için sunucunuza yükleyin. Cloudinary, ayrıntıları sizin için halleder ve sunucu kurulumu gerektirmez.
Birden fazla resim sürümü yayınlayın
Birden fazla resim sürümü belirlediğinizde tarayıcı, kullanılacak en iyi sürümü seçer:
| Önce | Sonra |
|---|---|
| <img src="cicek-buyuk.jpg"> | <img src="çiçek-büyük.jpg" srcset="çiçek-kucuk.jpg 480g, çiçek-büyük.jpg 1080g" boyutları="50vw"> |
<img> etiketinin src,
srcset ve sizes özelliklerinin tümü bu nihai sonuca ulaşmak için etkileşimde bulunur.
"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ğı yüklemeye geçer.
"srcset" özelliği
srcset özelliği, resim 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 tanımlayıcılar kullanılmaktadır. Böylece, öğrenmek için resmi indirmek zorunda kalmaz. 480w, tarayıcıya flower-small.jpg öğesinin 480 piksel genişliğinde olduğunu belirten bir genişlik tanımlayıcısıdır. 1080w, tarayıcıya flower-large.jpg öğesinin 1.080 piksel genişliğinde olduğunu bildiren bir genişlik tanımlayıcısıdır.
Ek Puan: Farklı resim boyutları yayınlamak için yoğunluk tanımlayıcıları hakkında bilgi sahibi olmanız gerekmez. Bununla birlikte, yoğunluk tanımlayıcılarının nasıl çalıştığını merak ediyorsanız Çözüm Geçişi kod laboratuvarı'na göz atın. Yoğunluk tanımlayıcıları, cihazın piksel yoğunluğuna göre farklı resimler sunmak için kullanılır.
"sizes" özelliği
sizes özelliği, tarayıcıya resmin gösterileceği genişliği söyler ancak resmin görüntü boyutunu etkilemez. Bu nedenle, CSS'ye yine de ihtiyacınız vardır.
Tarayıcı, hangi resmin yükleneceğini belirlemek için bu bilgileri ve kullanıcının cihazı hakkında bildiği bilgileri (boyutları ve piksel yoğunluğu dahil) kullanır.
Bir tarayıcı "sizes" özelliğini tanımıyorsa "src" özelliğiyle belirtilen resmi yüklemeye geçer. (sizes ve srcset aynı anda kullanıma sunulduğundan her tarayıcı bu özellikleri ya her ikisini de ya da hiçbirini destekler.)
Ek Puan: Daha da fazlasını yapmak istiyorsanız birden fazla yuva boyutu belirtmek için sizes özelliğini de kullanabilirsiniz. Bu, farklı görüntü alanı boyutları için farklı düzenler kullanan web sitelerini destekler. Bunu nasıl yapacağınızı öğrenmek için bu çoklu slot kodu örneğine göz atın.
(Daha da fazla) Ek kredi
Daha önce listelenen tüm ek kredilere (resimler karmaşıktır) ek olarak, sanat yönetmenliği için de aynı kavramları kullanabilirsiniz. Sanat yönetmeni, farklı görüntüleme alanlarında tamamen farklı görünen resimler (aynı resmin farklı sürümleri yerine) sunma pratiğidir. Daha fazla bilgi için Görsel Yönetmenlik kod laboratuvarını inceleyebilirsiniz.
Doğrula
Uyumlu resimleri uyguladıktan sonra, herhangi bir resmi atlamadığınızdan emin olmak için Lighthouse'ı kullanabilirsiniz. Lighthouse Performans Denetimi'ni (Lighthouse > Seçenekler > Performans) çalıştırın ve Resimleri doğru boyutta biçimlendirin denetiminin sonuçlarını arayın. Bu sonuçlar, hâlâ yeniden boyutlandırmanız gereken resimleri listeler.