Resimleri modern biçimlerde sunma

Lighthouse raporunuzun Fırsatlar bölümü, eski resim biçimlerindeki tüm resimleri listeler ve bu resimlerin AVIF versiyonlarının yayınlanmasıyla elde edilen potansiyel tasarrufları gösterir:

Modern biçimlerde Lighthouse Sunum görüntüleri denetiminin ekran görüntüsü

Resimler neden AVIF veya WebP biçiminde sunulmalıdır?

AVIF ve WebP, eski JPEG ve PNG muadillerine kıyasla daha üstün sıkıştırma ve kalite özelliklerine sahip resim biçimleridir. Resimlerinizi JPEG veya PNG yerine bu biçimlerde kodlamak, daha hızlı yüklenecek ve daha az hücresel veri kullanacakları anlamına gelir.

AVIF; Chrome, Firefox ve Opera'da 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örüntüleri Codelab'ini Sunma bölümüne bakın.

WebP; Chrome, Firefox, Safari, Edge ve Opera'nın en son sürümlerinde 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 Web İçin Yeni Bir Resim Biçimi bölümüne bakın.

Lighthouse potansiyel tasarrufları nasıl hesaplar?

Lighthouse, sayfadaki her BMP, JPEG ve PNG resmini toplar, bunları WebP'ye dönüştürür ve AVIF dosya boyutunu tahmin ederek dönüşüm rakamlarına dayanarak potansiyel tasarrufları raporlar.

Tarayıcı uyumluluğu

WebP, Chrome, Firefox, Safari, Edge ve Opera'nın en son sürümleri tarafından desteklenirken AVIF desteği daha sınırlıdır. Eski tarayıcı desteği için yedek bir PNG veya JPEG resmi yayınlamanız gerekir. Yedek tekniklere genel bakış için WebP için tarayıcı desteğini nasıl tespit edebilirim? bölümüne ve resim biçimlerinin tarayıcı desteği için aşağıdaki listeye bakın.

Her modern biçim için mevcut tarayıcı desteğini görmek üzere aşağıdaki girişlere göz atın:

Yığına özel rehberlik

AMP

Diğer tarayıcılar için uygun bir yedek belirtirken tüm amp-img bileşenlerini WebP biçimlerinde görüntülemeyi düşünün.

Drupal

Sitenizde WebP resim biçimlerinden yararlanmak için bir modül yüklemeyi ve yapılandırmayı düşünün. Bu tür modüller, yükleme sürelerini optimize etmek için yüklediğiniz resimlerin WebP sürümünü otomatik olarak oluşturur.

Joomla

Yüklediğiniz resimleri ideal biçimlere otomatik olarak dönüştürecek bir plugin veya hizmet kullanmayı düşünün.

Magento

Yeni resim biçimlerinden yararlanmak için Magento Marketplace'te çeşitli üçüncü taraf uzantılarını arama seçeneğini değerlendirin.

iPhone

iOS 16'nın altındaki iPhone'larda webp, avif resimleri ve webm videolarının çalışmayacağını unutmayın.

WordPress

Yüklediğiniz resimleri ideal biçimlere otomatik olarak dönüştürecek bir plugin veya hizmet kullanmayı düşünün.

Kaynaklar