Image Optimization Nedir?
Image optimization, görsellerin (JPG/PNG) modern formatlara (WebP, AVIF) dönüştürülmesi + responsive srcset + lazy loading + compression ile dosya boyutunun %60-80 küçültülmesi süreci. LCP'nin en büyük dostu — 4-5MB hero görseli 200-400KB'a indirgenince LCP 3s'den 1s'e düşüyor.
Modern image formatları: - WebP — Google geliştirdi 2010, %25-35 daha küçük JPG'den, kalite eşit. Tüm tarayıcılar destekliyor. - AVIF — AV1 codec, 2020 sonrası, %50 daha küçük JPG'den. Tarayıcı desteği %95+ (Safari iOS 16+). - WebP/AVIF lossless — PNG'den %30-50 daha küçük - SVG — vektör, scale-invariant, ikonlar için ideal
Responsive images (srcset): ```html <img srcset='hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w' sizes='(max-width: 600px) 400px, 800px' src='hero-800.webp' alt='...' width='800' height='450' /> ```
Next.js Image component otomatik: 1. WebP/AVIF format negotiation (Accept header'a göre) 2. Responsive srcset (deviceSizes config'inden) 3. Lazy load (default, loading='lazy') 4. Width + height (CLS koruması) 5. CDN serving (Vercel default veya Cloudflare R2)
Manuel optimization araçları: Squoosh (online, ücretsiz), Sharp (Node.js library), ImageOptim (Mac), TinyPNG (online API).
2026'da Türkiye sitelerinde ortalama 1.8MB toplam image weight — DevPixel projelerinde 250-400KB. Fark Lighthouse Performance skorunda 25-35 puan.
DevPixel'in image optimization stack: Next.js Image + WebP/AVIF auto + responsive srcset (deviceSizes [640, 828, 1080, 1280, 1920]) + 1 yıl cache. 50+ projemizde ortalama hero image 200-400KB. Build-time'da public/images dizini Sharp ile optimize ediliyor.