Lighthouse raporunuzun Fırsatlar bölümünde, sayfanızdaki uygun boyutta olmayan tüm resimler ve kibibayt (KiB) cinsinden potansiyel tasarruf listelenir. Veri tasarrufu yapmak ve sayfa yüklenme süresini kısaltmak için bu resimleri yeniden boyutlandırın:
Lighthouse, çok büyük resimleri nasıl hesaplar?
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 resim denetimi geçemez.
Resimleri uygun şekilde boyutlandırma stratejileri
İdeal olarak, sayfanızda kullanıcının ekranında oluşturulan sürümden daha büyük resimler sunulmamalıdır. Bundan daha büyük boyutlar yalnızca bayt israfına yol açar ve sayfa yüklenme süresini yavaşlatır.
Uygun boyutlu resimler sunmayla ilgili temel stratejiye "duyarlı resimler" adı verilir. Duyarlı resimlerle, her resmin birden fazla sürümünü oluşturur ve ardından medya sorgularını, görünüm alanı boyutlarını 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 bir yer işaretidir. Bu özellikler hakkında daha fazla bilgi edinmek için Duyarlı resimler sunma başlıklı makaleyi inceleyin.
Uygun boyutlu resimler sunmak için kullanılan bir diğer temel strateji de resim CDN'leridir. Resim CDN'lerini, resimleri 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çimlerini kullanmaktır. Sınırlı miktarda kodla SVG görüntüsü herhangi bir boyuta ölçeklenebilir. Daha fazla bilgi edinmek için Karmaşık simgeleri SVG ile değiştirme başlıklı makaleyi inceleyin.
gulp-responsive veya responsive-images-generator gibi araçlar, bir resmi birden fazla biçime dönüştürme sürecini otomatikleştirmenize yardımcı olabilir. Ayrıca, bir resmi yüklediğinizde veya sayfanızdan istediğinizde birden fazla sürüm oluşturmanıza olanak tanıyan resim CDN'leri de vardır.
Yığına özel rehberlik
AMP
Ekran boyutuna göre kullanılacak resim öğelerini belirtmek için amp-img bileşeninin srcset desteğini kullanın. Ayrıca srcset, sizes ve heights özelliklerine sahip duyarlı resimler konusuna 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 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.