Web Görselleri İçin Dosya Boyutu Rehberi: Format, Boyut ve Sıkıştırma

Web sitenize koyduğunuz her görselin bir dosya boyutu bütçesi vardır. Bu bütçeyi aşarsanız sayfanız yavaşlar; içinde kalırsanız her şey anında yüklenmiş hissini verir. Bu rehber, her kullanım senaryosu için somut KB hedefleri, buna eşleşen piksel boyutları ve sizi hedefe ulaştıracak format önerilerini içerir.

Kullanım Amacına Göre İdeal Dosya Boyutları

Aşağıdaki hedefler WebP veya AVIF kullandığınızı varsayar. JPEG ile çalışıyorsanız her değere yaklaşık %25-30 ekleyin.

Bu Sayılar Nereden Geliyor?

HTTP Archive 2025 verilerine göre ortalama bir web sayfası mobilde yaklaşık 2,5 MB ağırlığında ve görseller bu ağırlığın yaklaşık %40'ını — yani 1 MB'ını — oluşturuyor. Google'ın Largest Contentful Paint için "iyi" eşiği 2,5 saniyedir. 4G bağlantısında (etkin hız yaklaşık 1,5 MB/s) bu hedefe ulaşmak için hero görselinizin bir saniyenin altında yüklenmesi gerekir — bu da 200 KB sınırında kalmak anlamına gelir.

Yukarıdaki tablodaki değerler keyfi değil. Gerçek performans bütçelerinden tersine mühendislik ile belirlenmiştir: tipik bir sayfa için 400-600 KB toplam görsel bütçesi, hero, içerik ve küçük resim arasında dağıtılmıştır.

Format Seçimi En Büyük Farkı Yaratır

Aynı fotoğraf, aynı görsel kalitede, formata göre çok farklı dosya boyutlarına ulaşabilir:

JPEG'den WebP'ye geçmek %25-35 tasarruf sağlar. AVIF'e geçmek ise JPEG'e kıyasla yaklaşık %50 tasarruf getirir. Her iki format da şeffaflık destekler. Detaylı karşılaştırma için WebP vs AVIF rehberimize göz atın.

Görsellerinizi hemen dönüştürebilirsiniz: JPG'den WebP'ye, herhangi bir formattan AVIF'e veya birden fazla dosya için toplu dönüştürme aracını kullanın.

Piksel Boyutları: Gizli Çarpan

Dosya boyutu iki şeyin fonksiyonudur: piksel sayısı ve sıkıştırma. Çoğu kişi sıkıştırmaya odaklanıp piksel sayısını göz ardı eder — ama boyutları küçültmek çok daha büyük bir etki yaratır.

Kısa bir örnek: 4000 x 3000 piksellik bir fotoğraf 12 milyon piksel içerir. 1200 x 900'e küçültün ve 1,08 milyon piksele düşer — ham veride %91'lik bir azalma. Sıkıştırmadan önce bile ağırlığın büyük kısmını ortadan kaldırmış olursunuz.

Temel kural: Görseli gösterim kutusundan daha geniş sunmayın. Blog içerik alanınız 720 piksel genişliğindeyse, 1440 piksellik görsel (2x Retina için) sunmanız gereken maksimum değerdir. Bunun ötesi bant genişliği israfıdır.

Vizua'nın boyutlandırma aracı ile görselleri ihtiyacınız olan boyutlara indirebilirsiniz. Ardından JPEG veya PNG sıkıştırıcı ile son tasarrufu elde edin.

Sıkıştırma Kalitesi: Doğru Dengeyi Bulmak

Görseliniz doğru boyutta ve doğru formatta olduğunda, sıkıştırma kalitesi son ayar kadranıdır. İşte bu üç kaldıracın birlikte nasıl çalıştığını gösteren pratik bir senaryo:

Başlangıç noktası: Kamera fotoğrafı, 4000 x 3000, PNG olarak kaydedilmiş — yaklaşık 14 MB.

1. Boyutlandırma 1200 x 900'e (blog içerik genişliği, 2x Retina): PNG olarak ~3,5 MB
2. WebP'ye dönüştürme kalite 80: ~130 KB
3. AVIF'e dönüştürme kalite 65 (altyapınız destekliyorsa): ~90 KB

Orijinal PNG'den %99,3'lük bir azalma. Elde edilen görsel, normal görünüm boyutlarında kaynaktan görsel olarak ayırt edilemez.

Format bazında detaylı kalite önerileri için rehberimize göz atın: Kalite kaybetmeden resim sıkıştırma.

Özel Durumlar

E-ticaret ürün sayfaları

Ürün fotoğrafları yakınlaştırmada net gözükmeli. Ana görseli WebP formatında 800-1000px (Retina için 1600-2000px) olarak sunun. Çoğu ürün çekimi 80-150 KB arasında iyi sıkışır. Izgara görünümündeki küçük resimler 300-400px genişliğinde ve 20-50 KB civarında olmalıdır.

Fotoğraf portföyleri

Kalite en önemli unsurdur ama yükleme hızı da öyle. Önizleme görsellerini 1200-1600px genişliğinde WebP (kalite 85) formatında sunun ve 150-250 KB hedefleyin. Yüksek çözünürlüklü sürüm için ayrı bir "tam boyut görüntüle" linki sunun.

Sosyal medya paylaşımı (Open Graph)

OG görselleri 1200 x 630px olmalıdır. Facebook ve Twitter JPEG ve PNG kabul eder; bazı platformlar artık WebP de destekler. Bunları 150 KB altında tutun. Tarayıcıların tembel yükleme özelliğiyle değil, tarayıcılar (crawler) tarafından yüklendikleri için her kilobayt önemlidir.

Toplam Sayfa Görsel Bütçesi

Faydalı bir çerçeve: sayfa başına toplam görsel ağırlığını 500 KB altında hedefleyin. Bu tipik olarak şu anlama gelir:

• 1 hero görsel: ~150 KB
• 3-4 içerik görseli: her biri ~100 KB, toplam ~300-400 KB
• Küçük resimler, avatarlar, ikonlar: toplam ~50 KB

Bu bütçeyle sayfanız 4G'de hızlı yüklenir ve mobil veri planlarını tüketmez. Daha fazla görsele ihtiyacınız varsa (galeri, e-ticaret ızgarası), tembel yükleme ilk yüklemeyi bütçe dahilinde tutar — yalnızca ekranın üst kısmındaki görseller ilk yükleme performansını etkiler.

Sık Sorulan Sorular