Lighthouse raporunuzun Fırsatlar bölümünde, sayfanızda uygun boyutlu olmayan tüm resimler ve kibibayt (KiB) cinsinden potansiyel tasarruf listelenir. Veriden tasarruf etmek ve sayfa yükleme süresini kısaltmak için bu resimleri yeniden boyutlandırın:
Lighthouse büyük boyutlu 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ın piksel oranını da hesaba katar. Oluşturulan boyut gerçek boyuttan en az 4 KiB küçükse görüntü denetimde başarısız olur.
Resimleri doğru şekilde boyutlandırma stratejileri
İdeal olarak, sayfanız hiçbir zaman kullanıcının ekranında oluşturulan sürümden daha büyük resimler sunmamalıdır. Bundan daha büyük olanlar baytların boşa harcanmasına neden olur ve sayfa yükleme süresini yavaşlatır.
Uygun boyutlu resimler yayınlamanın ana stratejisi "duyarlı resimler" olarak adlandırılır. Duyarlı resimlerle her resmin birden fazla sürümünü oluşturur ve ardından medya sorguları, görüntü alanı boyutları gibi yöntemlerle 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 tanımlamak açısından yararlı bir yer işareti uygulamasıdır. Bu özellikler hakkında daha fazla bilgi edinmek için Duyarlı resimler yayınlama bölümüne bakın.
Resim CDN'leri, uygun boyutlu resimler yayınlamanın diğer bir ana stratejisidir. Görüntü CDN'lerini, görüntüleri dönüştürmek için kullanılan web hizmeti API'leri gibi düşünebilirsiniz.
Diğer bir strateji, SVG gibi vektör tabanlı resim biçimlerini kullanmaktır. Sınırlı miktarda kodla, bir SVG resmi her boyuta ölçeklenebilir. Daha fazla bilgi edinmek için Karmaşık simgeleri SVG ile değiştirme başlıklı makaleye bakın.
gulp-responsive veya responsive-images-generator gibi araçlar, bir resmi birden fazla biçime dönüştürme sürecini otomatikleştirmeye yardımcı olabilir. Ayrıca bir resim yüklediğinizde veya sayfanızdan resim isteğinde bulunduğunuzda 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 hangi resim öğelerinin kullanılacağını belirtmek için amp-img bileşeninin srcset desteğini kullanın. srcset, boyut ve yükseklik içeren duyarlı resimler konusuna da bakın.
Angular
Görüntü ayrılma noktalarını yönetmek için Bileşen Geliştirme Kiti'ndeki (CDK) BreakpointObserver yardımcı programını kullanmayı düşünün.
Drupal
Görüntüleme modları, görünümler veya WYSIWYG düzenleyicisi aracılığıyla yüklenen resimler aracılığıyla resim alanlarını oluştururken yerleşik Duyarlı Resim Stilleri özelliğini (Drupal 8 ve sonraki sürümlerde kullanılabilir) kullanın.
Gatsby
Akıllı telefonlar ve tabletler için daha küçük birden çok resim oluşturmak için 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ı düşünün.
WordPress
Gerekli resim boyutlarının kullanılabildiğinden emin olmak için resimleri doğrudan medya kitaplığından yükleyin ve ardından optimum resim boyutlarının kullanıldığından (duyarlı kesme noktaları 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.