Yayınlanma tarihi: 8 Ekim 2025
Resimlerin indirme süresini kısaltmak, sayfanın algılanan yükleme süresini ve LCP'yi daha iyi hale getirebilir.
Analizin başarısız olma nedeni
Bu analiz, gereksiz yere büyük indirme boyutlarına sahip resimleri vurgular. Tahmini bayt tasarrufu, resmin indirme boyutu ile resim biçiminin verimli bayt/piksel oranı karşılaştırılarak hesaplanır.
Resim indirme süresini iyileştirme
Bu analiz, resmin görüntülenen boyutuna ve dosya biçimine bağlı olarak resim indirme süresini iyileştirmek için çeşitli stratejiler önerir. Resim CDN'si dağıtmak, bu stratejilerin tümü için son derece faydalı olabilir.
Resim sıkıştırma faktörünü artırma
Çoğu resim biçimi, resim kalitesinden ödün vererek resim dosya boyutunu iyileştirmek için ayarlanabilen bir sıkıştırma düzeyini destekler. Resim sıkıştırma faktörünü optimize etmek için ImageOptim, Squoosh ve Imagemin gibi resim araçlarını kullanabilirsiniz.
Modern resim biçimlerini kullanın
AVIF ve WebP, eski JPEG ve PNG biçimlerine kıyasla üstün sıkıştırma ve kalite özelliklerine sahip resim biçimleridir. Resimlerinizi bu yeni biçimlerde kodlamak, resimlerin indirme boyutunu küçültmek için iyi bir stratejidir.
AVIF, tüm büyük tarayıcıların en son sürümünde desteklenir ve aynı kalite ayarlarına sahip diğer biçimlere kıyasla daha küçük dosya boyutları sunar. AVIF hakkında daha fazla bilgi için AVIF Görselleri Yayınlama Codelab'i inceleyin.
WebP, tüm büyük tarayıcılar tarafından desteklenir ve web'deki resimler için daha iyi kayıplı ve kayıpsız sıkıştırma sağlar. WebP hakkında daha fazla bilgi için WebP resimlerini kullanma başlıklı makaleyi inceleyin.
Animasyonlu içerik için video biçimleri kullanın
Büyük GIF'ler, animasyonlu içeriğin sunulmasında videolara kıyasla verimli olmaz. Ağ veri miktarından tasarruf etmek üzere animasyonlar için MPEG4/WebM videoları ve statik resimler için GIF yerine PNG/WebP kullanma seçeneğini değerlendirin.
GIF resimleri videolarla değiştirme hakkında bilgi edinmek için Sayfaların daha hızlı yüklenmesi için animasyonlu GIF'leri videolarla değiştirme başlıklı makaleyi inceleyin.
Duyarlı boyutta resimler sunma
İdeal olarak, sayfanızda kullanıcının ekranında oluşturulan sürümden daha büyük görseller 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.
Bir strateji, 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.
Vektör tabanlı resimler kullanılamıyorsa "duyarlı" resimler yayınlamak en iyisidir. Duyarlı resimlerle, her resmin birden fazla sürümünü oluşturur ve ardından medya sorgularını, görüntü alanı boyutlarını vb. kullanarak HTML veya CSS'nizde hangi sürümün kullanılacağını belirtirsiniz.
Örneğin, <img> öğesinde farklı boyutlardaki resim URL'lerini belirtebilen srcset ve sizes özellikleri bulunur:
Resmi tamamen değiştirmeniz gerekiyorsa <picture> öğesini kullanabilirsiniz:
Daha fazla bilgi edinmek için Duyarlı resimler ve Resim öğesi başlıklı makaleleri inceleyin.
Yığına özel rehberlik
Bu analiz, aşağıdaki teknolojileri kullanan sayfalar için yığına özel rehberlik de sunar:
AMP
- Diğer tarayıcılar için uygun bir yedek belirtirken tüm
amp-imgbileşenlerinizin WebP biçimlerinde görüntülenmesi seçeneğini değerlendirin. - Animasyonlu içerik için içerik ekran dışındayken CPU kullanımını en aza indirmek amacıyla
amp-animkullanın.
Drupal
- Site aracılığıyla yüklenen resimlerin kalitesini korurken boyutlarını otomatik olarak optimize eden ve küçülten bir modül kullanmayı değerlendirin.
- Sitede oluşturulan tüm resimler için Drupal'ın sağladığı yerleşik Duyarlı Resim Stilleri'ni kullandığınızdan emin olun.
Joomla
Yüklediğiniz resimleri ideal biçimlere otomatik olarak dönüştürecek bir eklenti veya hizmet kullanmayı değerlendirin.
Magento
Görüntüleri optimize eden üçüncü taraf bir Magento uzantısı kullanmayı düşünebilirsiniz.
WordPress
Kaliteden ödün vermeden resimlerinizi sıkıştıran bir resim optimizasyonu WordPress eklentisi kullanmayı değerlendirin.