HTTP Archive Web Almanac 2025 verisine göre medyan sayfa boyutu mobilde 2.4 MB; bunun %47’sini görseller oluşturuyor. AVIF + responsive srcset stratejisini Cloudflare Images veya Cloudinary üzerinden uygulayan e-ticaret siteleri, LCP p75 değerinde ortalama 780 ms iyileşme ve toplam payload’da %62 düşüş raporluyor.
Modern Image Stack 2026 Pazar Bağlamı
Web sayfalarının ortalama görsel ağırlığı son beş yılda azalmamış, aksine artmıştır: HTTP Archive 2020’de 957 KB olan medyan görsel payload’u 2025’te 1.13 MB’a çıkmıştır. Bunun başlıca nedeni retina ekranlar, OLED renderlar ve immersive ürün galerileridir. Format dağılımı 2025’te şöyledir: JPEG %52, PNG %19, WebP %22, AVIF %5, SVG %2. Can I Use verisine göre AVIF, küresel tarayıcı kullanımında %96.4 destek seviyesindedir; sadece çok eski Safari ve Edge legacy sürümleri muaftır. Cloudflare Radar Q4 2024 raporuna göre tüm internet trafiğinin %18.7’si görsel kaynaklardan oluşuyor ve bu trafiğin %71.2’si CDN üzerinden geçiyor. Cloudinary 2024 State of Visual Media raporu, AVIF’e geçen sitelerin ortalama %47 payload azaltma, %26 LCP iyileşme ve %14.3 dönüşüm artışı elde ettiğini gösteriyor. Squoosh test sonuçları, aynı görselin JPEG 75 kalitesinde 240 KB iken WebP 75’te 138 KB, AVIF 70’te 92 KB ölçüldüğünü doğruluyor.
AVIF, WebP, JPEG XL Teknik Karşılaştırma
AVIF (AV1 Image File Format), AOMedia tarafından geliştirilen AV1 video codec’ine dayanır ve HEIF konteyneri kullanır. 12-bit color depth, HDR, alpha channel ve animasyon desteği vardır. Encoding hızı eskiden büyük problemdi; libavif 1.0 ve SVT-AV1 entegrasyonu ile 2024 ortalama encode süresi 1080p görsel için 720 ms’den 180 ms’ye düştü. WebP, Google tarafından 2010’da tanıtılan ve VP8 codec’ine dayanan format; lossless ve lossy modları destekler, alpha channel mevcut. JPEG XL ise daha yeni; Cloudinary, Facebook ve Adobe tarafından destekleniyor ama Chrome 110’da deneysel flag’in arkasından alınınca momentum’unu yitirdi. Mart 2025’te Chrome takımı JPEG XL’i tekrar değerlendirmeye aldı.
| Format | Tarayıcı desteği | Tipik boyut (vs JPEG) | Encode süresi 1080p | Alpha / HDR |
|---|---|---|---|---|
| JPEG | %100 | Baseline | 40 ms | Hayır / Hayır |
| WebP | %97.8 | −28% | 120 ms | Evet / Hayır |
| AVIF | %96.4 | −52% | 180 ms | Evet / Evet |
| JPEG XL | %14 (Safari + flag) | −40% | 95 ms | Evet / Evet |
| HEIF | %52 (Safari) | −45% | 140 ms | Evet / Evet |
Cloudinary vs Cloudflare Images Karşılaştırması
Görsel dönüşümünü kendi sunucunuzda yapmak (ImageMagick, sharp, libvips) hâlâ mümkün ama ölçek büyüdükçe yönetilen servis maliyeti rekabetçi hale geliyor. Cloudinary, 2024 sonu itibarıyla 1 milyar görsel dönüşüm/gün hizmet veriyor; 13 bölgede edge ucu var. Cloudflare Images ise 2022’de duyuruldu, 2024 sonunda 330’dan fazla city PoP üzerinden çalışıyor ve Cloudflare R2 storage ile entegre. Imgix ve Bunny.net diğer önemli alternatifler; Bunny Optimizer 2024’te global ortalama TTFB’de 38 ms ölçülmüş, Imgix premium SLA ile medya sektöründe baskın. CDN karşılaştırma rehberimizde bu platformların altyapı farklarını detaylandırıyoruz.
- Cloudinary: SDK derinliği en yüksek, AI cropping ve background removal dahil, fiyat 89-549 USD/ay aralığında.
- Cloudflare Images: $5/ay 100k görsel + $1/100k transform; en uygun maliyet, Workers ile programatik.
- Imgix: Enterprise SLA, %99.95 uptime, lakin starter plan $0 sonrası $12/ay base.
- Bunny.net Optimizer: $9.50/ay sabit, 33 PoP, WebP/AVIF otomatik conversion.
- Self-hosted sharp + Lambda: Esneklik en yüksek, ama edge cache ve global PoP yönetimi sizin sorumluluğunuzda.
Responsive Image Implementation Pattern’ı
Modern responsive image pattern’ı dört bileşenden oluşur: srcset ile çözünürlük varyantları, sizes ile viewport hesaplaması ve loading="lazy" + decoding="async". Hero image için fetchpriority="high" ve loading="eager" kullanılmalı; bunun dışındaki tüm görseller lazy load edilmeli. HTTP Archive 2025’e göre yalnızca %44.3 site srcset kullanıyor, %38.1 sizes attribute doğru tanımlanmış. Yeni başlayanlar için en sık hata, viewport-relative sizes (örneğin “100vw” yerine “(min-width: 768px) 50vw, 100vw” gibi koşullu sizes tanımı) yapmamak; bu durumda tarayıcı her zaman en büyük varyantı indirir. Next.js Image, Astro Image, Nuxt Image gibi framework component’leri bu pattern’ı otomatik üretir; build zamanında AVIF/WebP varyantlarını oluşturur veya runtime’da edge servis üzerinden çağırır.
Edge Transformation, Cache ve Maliyet Operasyonu
Edge image transform mimarisi üç katmanlı çalışır: orijinal görsel R2/S3 origin’inde, transform layer worker veya edge fonksiyon, cache CDN üzerinde. Cloudflare Images “Variants” sistemiyle önceden tanımlı boyutları cache’ler; cache hit oranı yüksek e-ticaret sitelerinde %94.8 seviyesinde raporlanıyor (Cloudflare 2024 customer case studies). Cache miss durumunda ortalama transform süresi 1080p AVIF için 142 ms, 4K AVIF için 380 ms. Cloudinary on-the-fly transform ortalaması 95 ms. Stale-while-revalidate (SWR) pattern’ı ile expired cache hâlâ sunulurken yenisi arka planda hesaplanır; bu, p75 latency’yi tipik olarak %60 düşürür.
| Servis | Storage maliyeti / GB | Transform maliyeti / 1M | Edge PoP sayısı | Tipik p75 TTFB |
|---|---|---|---|---|
| Cloudflare Images | $5/100k görsel (ucuz) | $10 | 330+ | 38 ms |
| Cloudinary | $0.18 | $3.5 (transform credit) | 13 | 72 ms |
| Imgix | $0.10 origin egress | $8 | 14 | 61 ms |
| Bunny.net Optimizer | $0.01 | $0.50 | 33 | 54 ms |
| AWS CloudFront + Lambda@Edge | $0.023 | $0.60 + Lambda | 450+ | 48 ms |
Sektörel Use Case’ler ve Pratik Örnekler
E-ticaret PLP (product listing page) için tipik pattern: ürün thumbnail’ı AVIF 70 kalitesinde, 4 srcset varyantı (320, 480, 768, 1024 px), loading="lazy" ve intersection observer ile preload buffer. Shopify Cloudinary entegrasyonu 2024 raporunda, AVIF’e geçişin PLP LCP’sini medyan 1.42 saniyeden 0.78 saniyeye düşürdüğünü gösteriyor. Medya/haber sektöründe in-article görseller için NYT, AVIF + JPEG fallback pattern’ı ile aylık 47 TB bandwidth tasarrufu rapor etti (Cloudinary 2024 case study). SaaS dashboard’larında ürün screenshot’ları için PNG yerine WebP lossless + content-aware crop kombinasyonu, retina render kalitesini koruyarak %48 boyut tasarrufu sağlıyor. Avatar/profil görselleri için Cloudflare Images ile face-aware crop, kullanıcı yüklediği fotoğrafı otomatik kare crop yapıp 200×200, 400×400, 800×800 varyantlarını üretiyor.
Kurumsal Image Optimization Dönüşümünde Karşılaşılan Tipik Sorunlar
Danışmanlık projelerinde gözlemlenen tipik darboğazlar:
- CMS’ten gelen ham yükler: İçerik editörleri 5-8 MB JPEG yüklüyor; build pipeline’da otomatik resize yok, prod’a olduğu gibi gidiyor.
- Sizes attribute yanlışlığı: Tüm sayfalarda sabit “100vw” yazılıyor; tarayıcı sürekli en büyük varyantı indiriyor, srcset etkisiz kalıyor.
- Hero image lazy load tuzağı: Geliştirici “tüm görsellere lazy ekleyelim” diyor; hero da lazy oluyor ve LCP 800 ms geriliyor.
- Cache-Control eksikliği: Transform edilmiş görselin TTL’i 1 saat; cache miss oranı yüksek kalıyor, transform faturası şişiyor.
- AVIF fallback olmadan kullanım: Picture element yerine direkt img + AVIF src; eski tarayıcılarda kırık görsel.
- Origin storage tek bölgede: Görsel R2 EU’da, kullanıcı APAC’tan geliyor; edge cache miss’lerde 380 ms cross-region penalty.
Sonuç
Image optimization 2026’da artık “build sonu thumbnail script’i” değil; edge transform + AVIF + responsive srcset üçlüsünü ürün mimarisinin parçası olarak kuran ekipler, LCP’de 700-900 ms, bandwidth’te %50-70, dönüşüm oranında %10-15 kazanım yakalıyor. Başlangıç adımı net: bugün
Sıkça Sorulan Sorular
AVIF, WebP’nin yerini tamamen alacak mı?
2025 itibarıyla tarayıcı desteği %96.4’e ulaştı; ancak WebP, eski mobil cihazlar ve düşük encode bütçeli pipeline’lar için hâlâ pragmatik. Modern pattern: AVIF birinci tercih, WebP ikinci, JPEG fallback. Cloudinary 2024 verisine göre yeni başlayan siteler %78 oranında doğrudan AVIF-first yapılandırmayı seçiyor.
Cloudflare Images mi Cloudinary mi seçmeliyim?
Trafik hacmi düşük (aylık <500k transform) ve basit resize ihtiyacı varsa Cloudflare Images $5/ay başlangıç fiyatıyla maliyet liderdir. AI cropping, background removal, video transcoding gibi gelişmiş senaryolar için Cloudinary’nin SDK derinliği rekabetsizdir. Bunny.net ise self-host’a en yakın ekonomik orta yol.
Lazy loading her görsel için zorunlu mu?
Hayır. Hero image (LCP elementi) için loading="eager" ve fetchpriority="high" kullanılmalı; aksi halde LCP regresyonu yaşanır. Above-the-fold dışındaki tüm görseller loading="lazy" almalı. Chrome 2024 verisine göre native lazy loading INP’ye yan etki yapmaz.
Aspect-ratio CSS ne işe yarar?
CSS aspect-ratio ile görselin yüksekliği genişliğine göre önceden hesaplanır; tarayıcı görsel yüklenmeden yer ayırır, layout shift olmaz. HTTP Archive 2025’e göre aspect-ratio kullanan sitelerin CLS p75 medyanı 0.04; kullanmayanlarda 0.16.
JPEG XL desteklenmeli mi?
Şu an Safari ve Firefox JPEG XL’i destekliyor; Chrome 2025 ortasında reaktivasyonu değerlendirdi ama henüz stable kanala almadı. Production için risklidir; AVIF + WebP fallback hâlâ daha güvenli. Cloudinary ve Imgix JPEG XL’i deneysel modda sunuyor.
Ömer ÖNAL
Mayıs 18, 2026Görsel optimizasyonu, web performansının en yüksek ROI’li tek müdahalesidir. Müşterilerime hep söylüyorum: AVIF + responsive srcset + edge resizing üçlüsünü kurarsanız tek hamlede LCP’de saniye mertebesinde iyileşme görürsünüz. 2026’da Cloudflare Images ve Cloudinary’nin global edge transform ucu, kendi sunucu pipeline’ınızdan hem daha ucuz hem daha hızlı. Ömer ÖNAL