1. Core Web Vitals ve LCP (Largest Contentful Paint) Kriterleri
Google, arama sıralaması algoritmasında sayfa deneyimini ölçerken LCP metriğine özel bir ağırlık verir. LCP, kullanıcının sayfaya tıkladığı andan itibaren görünür alandaki en büyük içerik bloğunun (çoğunlukla hero görseli veya ürün fotoğrafı) tamamen ekrana basılmasına kadar geçen süredir.
İyi bir kullanıcı deneyimi için LCP süresinin 2.5 saniyenin altında kalması zorunludur. Optimize edilmemiş 2-3 MB boyutundaki bir JPEG görsel, 4G mobil ağlarda LCP süresini 4-6 saniyenin üzerine çıkararak hemen çıkma oranını (bounce rate) artırır ve arama sıralamanızı düşürür.
2. Format Karşılaştırması: JPEG, PNG, WebP ve AVIF
Klasik JPEG formatı 1992 yılında tasarlanmış olup Ayrık Kosinüs Dönüşümü (DCT) kullanır. PNG ise DEFLATE algoritmasıyla kayıpsız sıkıştırma yapar ancak dosya boyutları fotoğrafik içeriklerde oldukça büyüktür.
Google tarafından geliştirilen WebP, VP8 video codec'inin blok içi tahminleme (intra-prediction) yeteneklerini kullanır ve JPEG'e göre %25-34 oranında dosya boyutu avantajı sunar. Alliance for Open Media tarafından geliştirilen en yeni nesil AVIF formatı ise AV1 video mimarisini temel alır ve WebP'den bile %20-30 daha fazla veri tasarrufu sağlar.
| Format | Sıkıştırma Algoritması | Ortalama Boyut Tasarrufu | Saydamlık (Alpha) | Tarayıcı Desteği |
|---|---|---|---|---|
| JPEG | DCT (Discrete Cosine Transform) | Referans Noktası (%0) | Desteklemiyor | Tüm tarayıcılar (%100) |
| PNG | LZ77 + Huffman (DEFLATE) | Fotoğrafta +%100 daha büyük | Destekliyor | Tüm tarayıcılar (%100) |
| WebP | VP8 Intra-Prediction | %25 - %35 Tasarruf | Destekliyor | Tüm modern tarayıcılar (%97+) |
| AVIF | AV1 Intra-Frame Compression | %45 - %55 Tasarruf | Destekliyor | Chrome, Firefox, Safari 16.4+ (%93+) |
3. Terminalden Görsel Optimizasyonu: cwebp ve avifenc
Görselleri üretim ortamına hazırlarken komut satırı araçları (CLI) veya CI/CD boru hatları kullanılır. WebP için Google'ın resmi cwebp aracı, AVIF için ise libaom tabanlı avifenc tercih edilir:
Aşağıdaki komutlar, görsel kalitesinden ödün vermeden en yüksek sıkıştırma verimini elde etmek için optimize edilmiş bayrakları gösterir:
# 1. PNG veya JPEG görseli %82 kalite ile WebP'ye dönüştürme (Önerilen)
cwebp -q 82 -m 6 -af input.jpg -o hero-banner.webp
# 2. Kayıpsız (Lossless) WebP sıkıştırma (İkonlar ve logolar için)
cwebp -lossless -z 9 logo.png -o logo.webp
# 3. AVIF formatına dönüştürme (En yüksek sıkıştırma verimi)
avifenc --min 20 --max 30 --speed 4 input.jpg hero-banner.avif4. HTML5 Picture Etiketi ile Kademeli Fallback Mimarisi
Tüm tarayıcılarda maksimum hız ve geriye dönük uyumluluk sağlamak için HTML5 <picture> etiketi kullanılmalıdır. Tarayıcı sırayla kaynakları kontrol eder; AVIF destekliyorsa AVIF dosyasını, desteklemiyorsa WebP dosyasını, eski tarayıcılarda ise standart JPEG dosyasını yükler:
<picture>
<!-- Modern tarayıcılar için en hafif AVIF -->
<source type="image/avif" srcset="/images/hero.avif">
<!-- Standart modern tarayıcılar için WebP -->
<source type="image/webp" srcset="/images/hero.webp">
<!-- Eski tarayıcılar için klasik JPEG yedeği -->
<img
src="/images/hero.jpg"
alt="Yazılım Motoru Geliştirici Platformu"
width="1200"
height="630"
loading="lazy"
decoding="async"
>
</picture>5. Canvas 2D ile Tarayıcı İçi Kayıpsız Görsel İşleme
Yazılım Motoru Görsel Stüdyosu, fotoğraflarınızı sunucuya yüklemeden doğrudan HTML5 Canvas ve WebGL donanım hızlandırmasından faydalanarak yeniden boyutlandırır ve sıkıştırır. Cihazınızın yerel GPU birimi pikselleri anlık olarak işler, böylece gigabaytlarca fotoğrafı birkaç saniyede yerel olarak dönüştürebilirsiniz.