Web İçin Görsel Optimizasyonu: WebP, AVIF, Boyut ve Kalite Dengesi

Önce formatı değil görselin görevini belirle

Hero photography, logo, UI screenshot, editorial diagram ve transparan product cutout aynı optimizasyon kararını istemez. Fotoğraf yüksek renk/texture çeşitliliğine sahipken logo veya diagram için SVG çok daha doğru olabilir. PNG transparan veya lossless ihtiyacında yararlı olabilir; AVIF/WebP ise raster fotoğraf ve birçok illustration senaryosunda güçlü seçeneklerdir.

AVIF ve WebP: “hangisi daha iyi?” yerine hangi görselde daha iyi diye sor

MDN’nin 2026 image format rehberi AVIF’i güçlü lossy/lossless compression, alpha, HDR ve wide-gamut desteğiyle; WebP’yi de modern lossy/lossless, transparency ve animation desteğiyle tanımlar. AVIF çoğu test setinde daha yüksek compression potansiyeli sunabilir; ancak progressive rendering yapmaması, encode maliyeti ve belirli görsellerde artifact davranışı gibi pratik farklar vardır.

Bu yüzden export preset’i “AVIF quality 45 = her görsel” şeklinde sabitleme. Gradient, skin tone, grain, typography, thin line ve texture farklı compression davranışı gösterir. Hedef gerçek sayfa kullanımında görünür kalite ile byte cost arasındaki dengeyi bulmaktır.

En büyük kazanç çoğu zaman doğru piksel genişliğini göndermektir

Mobile card 360–500 CSS pixel civarında görünüyorsa her kullanıcıya 2400px master göndermek gereksiz veri transferidir. web.dev responsive images rehberi farklı width source’ları üretip `srcset` ile browser’a adaylar sunmayı, `sizes` ile de görselin layout’ta ne kadar geniş görüneceğini bildirmeyi önerir.

Bunlar evrensel değer değil; component’in gerçek CSS render width’i ve hedef device-pixel density’sine göre set oluştur. Kullanılmayacak 15 farklı width üretmek de operasyon maliyetini gereksiz artırır.

`srcset` ve `sizes` browser’a doğru seçimi nasıl yaptırır?

Width descriptor kullanan `srcset`, browser’a mevcut dosyaların intrinsic width’lerini söyler. `sizes` ise layout koşullarında image’in tahmini rendered width’ini bildirir. Browser viewport, device pixel ratio ve kendi seçim mantığıyla uygun adayı indirir.

Art direction gerekiyorsa yalnız resize yetmez

Desktop hero’daki yatay kompozisyon mobilde subject’i anlamsız küçültebilir. Burada aynı crop’un farklı width’leri yerine farklı crop/orientation gerekebilir. `<picture>` elementi media condition ve format kaynakları üzerinden browser’a prescriptive source selection sunabilir.

• Desktop: geniş environmental crop
• Tablet: daha sıkı crop
• Mobile: portrait/square subject-focused crop
• Alt text: crop değişse de görselin anlamını doğru açıklamaya devam etmeli

`width` ve `height` attributes layout shift’i azaltır

MDN güncel `<img>` dokümanı `width` ve `height` değerlerinin browser’a görsel yüklenmeden aspect ratio hesaplama imkânı verdiğini ve gerekli alanın önceden ayrılmasına yardımcı olduğunu belirtir. CSS görseli responsive boyutta render etse bile intrinsic oran önceden bilinir.

Bu attributes CSS pixel final size’ı kilitlemek zorunda değildir. Örneğin HTML’de intrinsic 1600×1000 verip CSS’te `width:100%; height:auto` kullanabilirsin; browser yine ratio’yu erken bilir.

Hero/LCP görselini lazy-load etme

web.dev LCP rehberi, page’in Largest Contentful Paint adayı olan kritik görseli `loading="lazy"` ile geciktirmenin gereksiz resource-load delay yaratacağını açıkça belirtiyor. Above-the-fold hero gerçek LCP adayıysa source HTML’de erken keşfedilebilir olmalı; gerektiğinde `fetchpriority="high"` seçici biçimde kullanılabilir.

Ama her üst görsele high priority vermek de doğru değildir. Priority bütçedir: browser bir kaynağı öne alırken başka kaynakları geriye iter. Çoğu sayfada bir gerçek LCP görselini önceliklendirmek yeterlidir.

Preload yalnız keşif problemi varsa kullan

Kritik `<img>` zaten initial HTML’de doğru `src/srcset` ile bulunuyorsa browser onu erken keşfedebilir. CSS background veya JS ile sonradan eklenen LCP image ise geç keşfedilebilir; bu durumda preload yardımcı olabilir. web.dev 2026 responsive preload rehberi `imagesrcset`/`imagesizes` kullanımını destekler fakat format bazlı birden fazla preload’ın gereksiz duplicate download riski yaratabileceğini de uyarır.

Benim önerdiğim portfolio / marketing görsel pipeline’ı

1. 01
   Master’ı kaybetme

   PSD/TIFF/PNG/JPEG yüksek kaliteli source ayrı archive’da kalsın.

2. 02
   Kullanım crop’unu tanımla

   Hero, card, article ve OG için gerekiyorsa ayrı composition üret.

3. 03
   Gerçek maksimum display width’i ölç

   Gereksiz 4K raster üretme.

4. 04
   2–4 anlamlı width variant hazırla

   Component ve density ihtiyacına göre width ladder oluştur.

5. 05
   AVIF/WebP kalite karşılaştırması yap

   Bir preset’e güvenmeden edge, gradient, skin, grain ve typography’yi kontrol et.

6. 06
   `srcset` + `sizes` ile adayları tanımla

   Browser’ın gerçek layout için uygun source seçmesini sağla.

7. 07
   Intrinsic dimensions ekle

   Layout space’i image yüklenmeden rezerve et.

8. 08
   Loading priority’yi route bazında belirle

   LCP eager/priority; below-fold lazy.

9. 09
   Network + visual QC yap

   DevTools’ta hangi source’un seçildiğini ve gerçek page görünümünü birlikte kontrol et.

Web image optimizasyonunda sık yapılan hatalar

• Her görseli AVIF’e çevirip işi bitmiş saymak.
• Mobile card’a desktop master boyutunda image göndermek.
• `srcset` yazıp `sizes` değerini gerçek layout’tan bağımsız tahmin etmek.
• Hero/LCP image’e lazy loading uygulamak.
• Her görsele `fetchpriority=high` vermek.
• Width/height attributes bırakmayıp image load sırasında layout shift yaratmak.
• UI screenshot’ta compression nedeniyle text/line artifact’lerini kontrol etmemek.
• OG/social image ile page-content image ihtiyacını aynı dosyaya zorlamak.