Masaüstü boyutunda resimler mobil cihazlara sunulduğunda 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 görseller ve Core Web Vitals
Duyarlı resimler yayınladığınızda 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 en uygun 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ı şekilde yayınlamak kaynak yükleme süresini azaltabilir.
Daha düşük kaynak yükleme süreleri, LCP resminin yükleme süresini kısaltarak sayfanızın LCP puanını iyileştirir. Daha düşük bir LCP, kullanıcıların sitenizi daha hızlı yüklenirken ve ö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ç resim sürümü oluşturmalısınız?
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 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 hizmetlerini de incelemenizi öneririz. Her ikisi de, istek üzerine resim değiştirme olanağı da sunan duyarlı resimler oluşturmanın basit yollarıdır. Thumbor'u ayarlamak için sunucunuza yükleyin. Cloudinary, ayrıntıları sizin için halleder ve sunucu kurulumu gerektirmez.
Birden fazla resim sürümü yayınlama
Birden fazla resim sürümü belirttiğinizde tarayıcı, kullanılacak en iyi sürümü seçer:
| Önce | Sonra |
|---|---|
| <img src="cicek-buyuk.jpg"> | <img src="cicek-buyuk.jpg" srcset="cicek-kucuk.jpg 480w, cicek-buyuk.jpg 1080w" sizes="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ının resmi indirmeden genişliğini öğrenebilmesi için tarayıcıya resmin ne kadar geniş olduğunu söyleyen genişlik tanımlayıcıları kullanılmaktadır. 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 belirten 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. Ancak yoğunluk tanımlayıcılarının işleyiş şeklini merak ediyorsanız Çözünürlük Değiştirme 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 hepsini 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 sitelerine olanak tanır. 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önerge 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çlarda, boyutunu değiştirmeniz gereken resimler listelenir.