4K Görsel mi Yoksa Optimize 800px mi — Performans vs Kalite Karşılaştırması

Maltepe'de 18 masalı tava restoranının sahibi şikayet ediyor: müşteriler QR'ı tarıyor ama menü ekranı 5-6 saniye boyunca boş kalıyor. Sebep basit — DSLR'dan çıkmış 4K JPEG'ler her ürün kartı için 4-6 MB ağırlığında. Çözüm 4K'yı atmak değil, doğru boyutta servis etmek.

Core Web Vitals: LCP'nin Kırmızı Çizgisi

Google'ın Largest Contentful Paint (LCP) eşiği 2.5 saniye. 4K görselle yüklenen menü kartı testlerimizde ortalama 4.2-6.1 saniye LCP üretiyor — "Poor" kategorisi. 800px WebP'ye geçince aynı kart 1.2-1.8 saniye arasına iniyor, "Good" eşiğinin altında kalıyor.

LCP sadece estetik değil — SEO sıralamasına direkt etki ediyor. Mobil Google sonuçlarında ilk 3 sırada görünen restoranların ortalama LCP'si 1.9 saniye altında. 4 saniye üstü siteler 2.-3. sayfaya iniyor; QR'la gelmeyen organik trafik kayıpsa direkt para kaybı.

800px WebP Neden Yeterli

Modern telefon ekranları (iPhone 14, Samsung Galaxy S23) 390-430px CSS genişliği. Retina için 2x = 860px. Yani 800px WebP zaten "fizik üst sınırı". 4K'nın geri kalan 3200 piksele kullanıcı ekranında karşılık gelen tek bir piksel bile yok — sadece dosya boyutu.

WebP formatı JPEG'e göre %25-35 daha küçük aynı görsel kalitede. Bir 4K JPEG (5.2 MB) yerine 800px WebP (180 KB) servis etmek 96.5% bandwidth tasarrufu. Aylık 3000 müşteri × 20 ürün görseli = 320 GB transferden 11 GB'a düşüş.

thMenu Responsive Image Servisi

thMenu'da görselleri 4K orijinal yüklediğinizde Cloudflare R2'ya kaydediliyor, sonra otomatik olarak 320px, 640px, 800px, 1200px türevleri WebP+AVIF formatında üretiliyor. Müşterinin cihazına göre srcset ile doğru boyut seçiliyor — kahverengi telefon 320px alıyor, tablet 800px.

Lazy loading varsayılan açık: ekrana giren ürün kartının görseli yükleniyor. İlk açılışta sadece üst 4 ürün indirilirse First Contentful Paint 600ms altında. Daha sonra scroll edildikçe diğer görseller arka planda çekiliyor — kullanıcı bekleme algılamıyor.

SSS

Orijinal 4K görseli silmem gerekir mi? Hayır. thMenu orijinali R2'da saklar — gelecekte 8K ekranlar yaygınlaşırsa otomatik daha yüksek türevler üretilebilsin diye. Sadece servis edilen boyutu optimize ediyor.

AVIF JPEG'ten ne kadar küçük? Aynı görsel kalitede AVIF JPEG'ten ortalama %50 küçük, WebP'ten %20 küçük. Safari 16+ ve Chrome 85+ destekliyor — kullanıcının %94'ü.

Profesyonel fotoğraf kalitesi düşmez mi? 800px ekranda 4K'dan ayırt edilemez — insan gözü mobilde 300 PPI üstünü algılayamaz. Quality 80 WebP, 100 quality JPEG'le retina ekranda görsel olarak eşdeğer.

Faydalı buldunuz mu? Paylaşın.