AVIF ve WebP Formatları Web Performansını Nasıl Etkiler?

AVIF ve WebP formatları, geleneksel JPEG ve PNG'ye kıyasla %50 ila %70 arasında daha yüksek sıkıştırma verimliliği sağlar. HTML5 `<picture>` etiketi ve duyarlı `srcset` mimarisiyle sunulduğunda, Largest Contentful Paint (LCP) süresini 0.6 saniyenin altına indirir ve mobil cihazlarda sayfa yükleme sürelerini belirgin şekilde düşürür.

Görsel Formatlarının Performans Metrikleri Karşılaştırması

Aşağıdaki tablo, 1920x1080 piksel çözünürlüğündeki örnek bir kapak görselinin farklı formatlardaki boyut ve yüklenme metriklerini göstermektedir:

| Görsel Formatı | Ortalama Dosya Boyutu | Ortalama LCP Süresi | Tarayıcı Uyum Yüzdesi | Sıkıştırma Standardı | |---|---|---|---|---| | **JPEG / PNG** | 1.85 MB | 2.4s | %100 | Standart / Kayıpsız | | **WebP** | 420 KB | 0.9s | %97.8 | VP8 / Lossy-Lossless | | **AVIF** | 185 KB | 0.5s | %93.2 | AV1 Keyframe |

PHP ve HTML5 `<picture>` Etiketi İle Duyarlı Görsel Sunumu

Yapay zekâ botlarının ve arama motorlarının görsel varlıklarını doğru ilişkilendirmesi, aynı zamanda tarayıcıların düzen kayması (CLS) yaşamaması için HTML5 `<picture>` mimarisi kullanılmalıdır:

  • **`decoding="async"`:** Görsel işlenirken ana iş parçacığının (main thread) bloke edilmesini engeller.
  • **`fetchpriority="high"`:** Sayfanın ilk ekranında yer alan (above-the-fold) LCP görselinin öncelikli yüklenmesini sağlar.
  • **Boyut Tanımları (`width` ve `height`):** Tarayıcının görsel yüklenmeden önce gereken alanı ayırmasını sağlayarak Cumulative Layout Shift (CLS) skorunu 0'da tutar.

Sıkça Sorulan Sorular

#### AVIF Formatını Desteklemeyen Tarayıcılarda Ne Olur? HTML5 `<picture>` etiketi sırasıyla `<source type="image/avif">`, `<source type="image/webp">` ve varsayılan `<img>` etiketini tarar. Tarayıcı AVIF desteklemiyorsa otomatik olarak WebP varyantına geçer; bu sayede geriye dönük uyumluluk %100 korunur.

#### LCP Görsellerinde `loading="lazy"` Kullanılmalı mıdır? Hayır, ekranın üst kısmında (above-the-fold) yer alan LCP görsellerinde kesinlikle `loading="lazy"` kullanılmamalıdır. Tembel yükleme, tarayıcının görseli keşfetme süresini geciktirdiği için LCP skorunu olumsuz etkiler. Bunun yerine `fetchpriority="high"` tercih edilmelidir.