Lighthouse raporunuzun Fırsatlar bölümünde, sayfanızdaki uygun boyutlarda olmayan tüm resimler ve bu resimlerin kibibayt (KiB) cinsinden potansiyel tasarrufları listelenir. Veriden tasarruf etmek ve sayfa yüklenme süresini kısaltmak için bu resimleri yeniden boyutlandırın:
Lighthouse'ın büyük boyutlu resimleri hesaplama şekli
Lighthouse, sayfadaki her resim için oluşturulan resmin boyutunu gerçek resmin boyutuyla karşılaştırır. Oluşturulan boyut, cihaz piksel oranını da hesaba katar. Oluşturulan boyut gerçek boyuttan en az 4 KiB daha küçükse görüntü denetimde başarısız olur.
Resimleri doğru şekilde boyutlandırmayla ilgili stratejiler
İdeal olarak, sayfanızda sunucunun ekranında oluşturulan halinden büyük görseller sunulmamalıdır. Bundan daha büyük bir değer, baytların boşa harcanmasına neden olur ve sayfanın yüklenme süresini yavaşlatır.
Uygun boyutlu resimler yayınlamayla ilgili ana stratejiye "duyarlı resimler" denir. Duyarlı resimlerde her resmin birden fazla sürümünü oluşturur ve ardından medya sorguları, ekran boyutları vb. kullanarak HTML veya CSS'nizde hangi sürümün kullanılacağını belirtirsiniz. Ayrıca, RespImageLint, resimleriniz için en uygun srcset ve sizes değerlerini belirlemenize yardımcı olan kullanışlı bir yer işaretidir. Bu özellikler hakkında daha fazla bilgi edinmek için Duyarlı resimler yayınlama başlıklı makaleyi inceleyin.
Resim CDN'leri, uygun boyutlu resimler sunmak için kullanılan diğer bir ana stratejidir. Görüntü CDN'lerini, görüntüleri dönüştürmek için kullanılan web hizmeti API'leri gibi düşünebilirsiniz.
Başka bir strateji de SVG gibi vektör tabanlı resim biçimleri kullanmaktır. SVG resimleri, sınırlı miktarda kodla herhangi bir boyuta ölçeklenebilir. Daha fazla bilgi edinmek için Karmaşık simgeleri SVG ile değiştirme bölümüne bakın.
gulp-responsive veya responsive-images-generator gibi araçlar bir resmi birden fazla biçime dönüştürme işlemini otomatikleştirmeye yardımcı olabilir. Resim yüklerken veya sayfanızdan resim isteğinde bulunurken birden fazla sürüm oluşturmanıza olanak tanıyan resim CDN'leri de vardır.
Pakete özel yönergeler
AMP
Ekran boyutuna göre hangi resim öğelerinin kullanılacağını belirtmek için amp-img bileşeninin srcset desteğini kullanın. srcset, sizes ve heights özelliklerine sahip duyarlı resimler konusuna da bakın.
Angular
Görüntü ayrılma noktalarını yönetmek için Bileşen Geliştirme Kiti'nde (CDK) BreakpointObserver yardımcı programını kullanmayı düşünün.
Drupal
Drupal tarafından sağlanan yerel Duyarlı Resim Stilleri'ni kullandığınızdan emin olun. Görünüm modları, görünümler ile resim alanlarını veya WYSIWYG düzenleyicisi ile yüklenen resimleri oluştururken Duyarlı Resim Stilleri'ni kullanın.
Gatsby
Akıllı telefonlar ve tabletler için birden fazla küçük resim oluşturmak üzere gatsby-image eklentisini kullanın. Ayrıca, verimli bir şekilde geç yükleme için SVG resim yer tutucuları da oluşturabilir.
Joomla
Duyarlı resim eklentisi kullanmayı değerlendirin.
WordPress
Gerekli resim boyutlarının kullanılabilmesi için resimleri doğrudan medya kitaplığından yükleyin, ardından ideal resim boyutlarının kullanıldığından (esnek ayrılma noktası için olanlar dahil) emin olmak için resimleri medya kitaplığından ekleyin veya resim widget'ını kullanın. Boyutları kullanım için yeterli değilse Full Size resimler kullanmaktan kaçının. Yayınlara ve sayfalara resim ekleme başlıklı makaleyi inceleyin.