Web Gorselleri Icin Dosya Boyutu Rehberi: Format, Boyut ve Sikistirma

Web sitenize koydugu her gorselin bir dosya boyutu butcesi vardir. Bu butceyi asarsaniz sayfaniz yavaslar; icinde kalirsan her sey aninda yuklenenis hissini verir. Bu rehber, her kullanim senaryosu icin somut KB hedefleri, buna eslesen piksel boyutlari ve sizi hedefe ulastiracak format onerilerini icerir.

Kullanim Amacina Gore Ideal Dosya Boyutlari

Asagidaki hedefler WebP veya AVIF kullandiginizi varsayar. JPEG ile calisiyorsaniz her degere yaklasik %25-30 ekleyin.

Bu Sayilar Nereden Geliyor?

HTTP Archive 2025 verilerine gore ortalama bir web sayfasi mobilde yaklasik 2,5 MB agirliginda ve gorseller bu agirligin yaklasik %40'ini — yani 1 MB'ini — olusturuyor. Google'in Largest Contentful Paint icin "iyi" esigi 2,5 saniyedir. 4G baglantisinda (etkin hiz yaklasik 1,5 MB/s) bu hedefe ulasmak icin hero gorselinizin bir saniyenin altinda yuklenmesi gerekir — bu da 200 KB sinirinda kalmak anlamina gelir.

Yukaridaki tablodaki degerler keyfi degil. Gercek performans butcelerinden tersine muhendislik ile belirlenmistir: tipik bir sayfa icin 400-600 KB toplam gorsel butcesi, hero, icerik ve kucuk resim arasinda dagitilmistir.

Format Secimi En Buyuk Farki Yaratir

Ayni fotograf, ayni gorsel kalitede, formata gore cok farkli dosya boyutlarina ulasabilir:

JPEG'den WebP'ye gecmek %25-35 tasarruf saglar. AVIF'e gecmek ise JPEG'e kiyasla yaklasik %50 tasarruf getirir. Her iki format da seffaklik destekler. Detayli karsilastirma icin WebP vs AVIF rehberimize goz atin.

Gorsellerinizi hemen donusturebilirsiniz: JPG'den WebP'ye, herhangi bir formattan AVIF'e veya birden fazla dosya icin toplu donusturme aracini kullanin.

Piksel Boyutlari: Gizli Carpan

Dosya boyutu iki seyin fonksiyonudur: piksel sayisi ve sikistirma. Cogu kisi sikistirmaya odaklanip piksel sayisini goz ardi eder — ama boyutlari kucultmek cok daha buyuk bir etki yaratir.

Kisa bir ornek: 4000 x 3000 piksellik bir fotograf 12 milyon piksel icerir. 1200 x 900'e kucultun ve 1,08 milyon piksele duser — ham veride %91'lik bir azalma. Sikistirmadan once bile agirligin buyuk kismini ortadan kaldirmis olursunuz.

Temel kural: Gorseli gosterim kutusundan daha genis sunmayin. Blog icerik alaniniz 720 piksel genisligindeyse, 1440 piksellik gorsel (2x Retina icin) sunmaniz gereken maksimum degerdir. Bunun otesi bant genisligi israfidir.

Vizua'nin boyutlandirma araci ile gorselleri ihtiyaciniz olan boyutlara indirebilirsiniz. Ardindan JPEG veya PNG sikistirici ile son tasarrufu elde edin.

Sikistirma Kalitesi: Dogru Dengeyi Bulmak

Gorseliniz dogru boyutta ve dogru formatta olduqunda, sikistirma kalitesi son ayar kadrandir. Iste bu uc kaldiracion birlikte nasil calistigini gosteren pratik bir senaryo:

Baslangic noktasi: Kamera fotografi, 4000 x 3000, PNG olarak kaydedilmis — yaklasik 14 MB.

1. Boyutlandirma 1200 x 900'e (blog icerik genisligi, 2x Retina): PNG olarak ~3,5 MB
2. WebP'ye donusturme kalite 80: ~130 KB
3. AVIF'e donusturme kalite 65 (altyapiniz destekliyorsa): ~90 KB

Orijinal PNG'den %99,3'luk bir azalma. Elde edilen gorsel, normal gorunum boyutlarinda kaynaktan gorsel olarak ayirt edilemez.

Format bazinda detayli kalite onerileri icin rehberimize goz atin: Kalite kaybetmeden resim sikistirma.

Ozel Durumlar

E-ticaret urun sayfalari

Urun fotograflari yakinlastirmada net gozukmeli. Ana gorseli WebP formatinda 800-1000px (Retina icin 1600-2000px) olarak sunun. Cogu urun cekimi 80-150 KB arasinda iyi sikisir. Izgara gorunumundeki kucuk resimler 300-400px genisliginde ve 20-50 KB civarinda olmalidir.

Fotograf portfoyleri

Kalite en onemli unsurdur ama yukleme hizi da oyle. Onizleme gorsellerini 1200-1600px genisliginde WebP (kalite 85) formatinda sunun ve 150-250 KB hedefleyin. Yuksek cozunurluklu surum icin ayri bir "tam boyut goruntule" linki sunun.

Sosyal medya paylasimi (Open Graph)

OG gorselleri 1200 x 630px olmalidir. Facebook ve Twitter JPEG ve PNG kabul eder; bazi platformlar artik WebP de destekler. Bunlari 150 KB altinda tutun. Tarayicilarin tembel yukleme ozelligiyle degil, tarayicilar (crawler) tarafindan yuklendikleri icin her kilobayt onemlidir.

Toplam Sayfa Gorsel Butcesi

Faydali bir cerceve: sayfa basina toplam gorsel agirligini 500 KB altinda hedefleyin. Bu tipik olarak su anlama gelir:

• 1 hero gorsel: ~150 KB
• 3-4 icerik gorseli: her biri ~100 KB, toplam ~300-400 KB
• Kucuk resimler, avatarlar, ikonlar: toplam ~50 KB

Bu butceyle sayfaniz 4G'de hizli yuklenir ve mobil veri planlarini tuketmez. Daha fazla gorsele ihtiyaciniz varsa (galeri, e-ticaret izgarasi), tembel yukleme ilk yuklemeyi butce dahilinde tutar — yalnizca ekranin ust kismindaki gorseller ilk yukleme performansini etkiler.

Sik Sorulan Sorular