Neden Gorsel Optimizasyonu?
Mobil uygulamalarda gorseller toplam boyutun %60-80'ini olusturabilir. Optimize edilmemis gorseller hem uygulama boyutunu sisirir hem de runtime'da bellek tuketimini artirir. Dogru format, dogru cozunurluk ve dogru yukleme stratejisi uygulamanin hizini dogrudan etkiler.
Format Karsilastirmasi
WebP
- Google tarafından gelistirildi
- PNG'den %25-35, JPEG'den %25-34 daha küçük
- Hem lossy hem lossless destegi var, seffaflik destekler
- iOS 14+ ve tum Android surumlerinde native destek
- 2026'da mobilde en guvenli ve yaygin tercih
AVIF
- AV1 codec'inden turetilmis gorsel formati
- WebP'den %20 daha küçük dosya boyutu
- iOS 16+ ve Android 12+ destekli
- Encode suresi yavas, eski cihazlarda fallback gerekir
- CDN uzerinden kullanildiginda en verimli
PNG ve JPEG
- PNG: Lossless, seffaflik destegi, ikon/logo icin uygun (fotograf icin büyük)
- JPEG: Lossy, fotograflar icin iyi, seffaflik yok
| Ozellik | WebP | AVIF | PNG | JPEG |
|---|---|---|---|---|
| Boyut | Küçük | En küçük | Büyük | Orta |
| Seffaflik | Var | Var | Var | Yok |
| Animasyon | Var | Var | APNG ile | Yok |
| Mobil destek | Genis | Sınırlı (yeni OS) | Tam | Tam |
Cozunurluk Yonetimi (@1x/@2x/@3x)
Cihazlarin piksel yogunluklari farkli oldugu icin tek gorsel yetmez:
- @1x: Standart cozunurluk (eski cihazlar)
- @2x: Retina (cogu iPhone, orta-ust Android)
- @3x: Super Retina (iPhone Pro, flagship Android)
iOS: Asset Catalog icine 1x/2x/3x koy, App Thinning ile sadece uygun olan indirilir. Android: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi klasorleri. AAB ile otomatik density split. React Native: image@2x.png, image@3x.png adlandirmasi ile Metro otomatik secer.
Lazy Loading Stratejileri
- FlatList / FlashList gorunur alani render eder, gerisi beklenir
- Gorunum alanina yaklasan gorseller prefetch edilir
- Placeholder olarak dusuk cozunurluklu gorsel veya blur hash göster
- Sayfa sonuna dogru scroll edildiginde sonraki batch yuklenir
Progressive Image Loading
- Küçük (20-40px) blur gorsel yukle (placeholder)
- Orta cozunurluklu versiyonu getir
- Tam cozunurluk yukle
- BlurHash veya ThumbHash ile renk bazli placeholder kullanilabilir
CDN Uzerinden Gorsel Servisi
Bundle icine gomme yerine CDN tercih et:
- Cloudflare Images veya Cloudinary ile on-the-fly boyutlandirma
- URL parametreleriyle cozunurluk, format ve kalite belirle
- Cihaz density'sine gore dinamik URL oluştur
- Global dagitim ile yakin edge'den servis et
Image Caching
- Memory Cache: RAM'de, en hizli, uygulama kapaninca sifirlanir
- Disk Cache: Cihaz deposunda, uygulama kapansa da kalir, boyut siniri koy (100-500MB)
- Strateji: Once memory, sonra disk, yoksa network. Stale-while-revalidate ile eski gorseli göster, arka planda guncelle.
Expo Image vs React Native Fast Image
expo-image (Onerilen)
- Expo SDK 49+ ile geldi, aktif gelistirme altinda
- BlurHash/ThumbHash destegi yerlesik
- Memory ve disk cache otomatik
- WebP, AVIF, GIF, SVG destegi
- FlatList'te recycling ile yuksek performans
react-native-fast-image
- Uzun sure standart cozumdu ama 2024'ten beri bakimi azaldi
- Expo managed workflow'da kullanilamiyor
| Ozellik | expo-image | FastImage |
|---|---|---|
| Cache | Otomatik (memory + disk) | Otomatik |
| BlurHash | Yerlesik | Manuel |
| AVIF | Var | Sınırlı |
| Expo uyumu | Tam | Bare workflow |
| Aktif bakim | Evet (2026) | Azaldi |
App Bundle Boyutuna Etkisi
- Her 1MB gorsel, tum density'ler dahil 3-4MB bundle artisi demek
- 50+ gorselli uygulamalarda CDN'e tasinmak bundle'i %40-60 kucultebilir
- Sadece splash, ikon ve placeholder gibi kritik gorselleri bundle'da tut
2026 Onerileri
- Varsayilan format olarak WebP kullan, AVIF'i CDN uzerinden sun
- expo-image'a gec, FastImage'i birak
- BlurHash ile placeholder göster, bos alan birakma
- Bundle'daki gorselleri minimumda tut, CDN'e tasi
Gorsel optimizasyonu tek seferlik bir is degil. Her yeni gorsel eklerken format, boyut ve yukleme stratejisini dusun.