Sabit ve iyi belgelenmiş ölçüleri olan sosyal ağların aksine, sitelerin düzenleri değişkendir, duyarlıdır ve kullanım bağlamları birbirinden çok farklıdır. Ana sayfadaki bir banner ekranın tüm genişliğini kaplar. Bir ürün fotoğrafı cihaza göre 400px ya da 800px görünebilir. Blog görseli ise bir metin sütununun içinde yer alır.
"Site görseli" için tek bir doğru ölçü yok; ama her bağlam için önerilen aralıklar var ve bunları bilmek, hızlı ve düzgün görünen bir siteyle bulanık ya da gereğinden ağır görsellere sahip yavaş bir site arasındaki farkı yaratıyor.
Görsel ölçüsü sitenizi neden etkiler
Görseller optimize edilmediğinde iki ayrı sorun ortaya çıkar:
- Piksel olarak fazla büyük görseller: tarayıcı, 800px'te göstereceği bir fotoğrafı 4000px olarak indirir; aktarılan verinin %80'i anında çöpe gider. Site hiçbir görsel kazanç olmadan yavaşlar.
- KB/MB olarak fazla ağır görseller: ölçüler doğru olsa bile sıkıştırılmamış bir fotoğraf 3 MB olabilir; oysa ekranda aynı görsel kaliteyle 150 KB olabilirdi.
İki sorunun çözümü farklıdır: ilki boyutlandırma (pikselleri ayarlamak) ister, ikincisi ise sıkıştırma (pikselleri değiştirmeden dosya boyutunu düşürmek) ister. Pratikte en iyi sonucu, ikisini art arda uygulamak verir.
💡 Genel kural: web için hazırlanan hiçbir görselin maksimum genişliğinin şunu aşması gerekmez: 1920px — yani bir Full HD monitörün genişliği. Hiçbir zaman tüm ekranı kaplamayan görsellerde (sütunlar, ürün ızgaraları, küçük görseller) sınır daha da düşüktür. Bunun üstü, bant genişliği israfı ve yavaş yükleme demektir.
Referans tablosu — görsel türüne göre ölçüler
| Görsel türü | Önerilen ölçüler | İdeal dosya boyutu | Format |
|---|---|---|---|
| Banner / hero (tam genişlik) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Masaüstü banner (kutulu düzen) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Mobil banner | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Ürün fotoğrafı (e-ticaret) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Ürün küçük görseli | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Yazı / blog görseli | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Yazı küçük görseli (liste) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Header logosu | 200–400 px genişlik | 5–30 KB | SVG / PNG / WebP |
| Arayüz ikonları | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | her biri 1–10 KB | .ico + PNG |
| Open Graph (sosyal önizleme) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Bölüm arka planı | 1920 × değişken yükseklik | 100–300 KB | WebP / JPG |
| Profil fotoğrafı / avatar (site) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Görüş / müşteri görseli | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Site türüne göre ölçüler
Kurumsal siteler ve portfolyolar
Kurumsal sitelerde içerik genişliği genellikle 960px ile 1440px arasındadır. Banner ya da hero görselleri çoğunlukla düzenin tüm genişliğini kaplar; dolayısıyla modern monitörler için 1440–1920px genişlik yeterlidir. Bölüm görsellerinin (ekip, ofis, hizmet fotoğrafları) ise 800px genişliği aşması nadiren gerekir.
- Ana banner: 1920 × 700–900px, 200 KB'ın altında
- Ekip fotoğrafı: 400–600 × 400–600px, 60 KB'ın altında
- Hizmet / bölüm fotoğrafı: 800–1200 × 500–700px, 100 KB'ın altında
Bloglar ve içerik portalları
Bloglarda içerik sütunu nadiren 760–800px genişliği aşar. 1200px'lik bir öne çıkan görsel (featured image), her duyarlı düzeni israfsız karşılamak için fazlasıyla yeterlidir. Yazı listelerindeki küçük görseller daha da ufaktır: genelde 300–500px.
- Öne çıkan görsel: 1200 × 630px, 100 KB'ın altında
- Yazı içindeki görseller: 800–1200px genişlik, her biri 80 KB'ın altında
- Listedeki küçük görsel: 400 × 250px, 30 KB'ın altında
E-ticaret ve sanal mağazalar
E-ticarette ürün fotoğrafları en kritik ögedir; müşteriyi ikna eden başlıca araçtır. Çözünürlük, site yakınlaştırma sunuyorsa buna yetecek kadar olmalı; dosya boyutu ise aynı anda çok sayıda görsel yükleyen liste sayfalarının hızını düşürmeyecek biçimde denetim altında tutulmalı.
- Ana ürün fotoğrafı (kare): 800–1200 × 800–1200px, WebP'de 80–150 KB
- Ek ürün fotoğrafları: ana fotoğrafla aynı ölçü
- Ürün ızgarasındaki küçük görsel: 300–500 × 300–500px, 20–50 KB
- Kategori / kampanya banner'ı: 1440 × 400–600px, 80–150 KB
🛍️ E-ticaret için: ürün fotoğraflarında her zaman beyaz ya da nötr arka plan kullanın; bu hem sıkıştırmayı kolaylaştırır (geniş düz renk alanları çok iyi sıkışır), hem farklı tedarikçilerin ürünleri arasında görsel tutarlılık sağlar, hem de sepetteki karşılaştırma deneyimini iyileştirir.
Landing pages
Landing page'ler tek bir dönüşüm eylemi için tasarlanır ve hız kritiktir: araştırmalar, yüklemedeki her ek saniyenin dönüşüm oranını %7–12 düşürdüğünü gösteriyor. Landing page'lerdeki görsellerin sıkı biçimde optimize edilmesi gerekir.
- Hero / arka plan: 1440–1920px genişlik, 150 KB'ın altında — en yüksek öncelik
- Ürün / hizmet fotoğrafı: 600–800px, 80 KB'ın altında
- Fayda ikonları: mümkün olan her yerde SVG
- Görüş fotoğrafı: 80–120px yuvarlak, 15 KB'ın altında
2× faktörünün etkisi (Retina ve HiDPI ekranlar)
Retina (Apple) ve HiDPI (diğer üreticiler) ekranların piksel yoğunluğu iki katıdır; yani inç başına sıradan monitörlerden daha çok piksel gösterirler. Görsellerin bu ekranlarda net görünmesi için, görselin gösterim alanının iki katı piksele sahip olması gerekir.
Örnek: Retina ekranda 400px genişlikte gösterilen bir görselin net görünmesi için 800px genişliğinde olması gerekir. Yalnızca 400px yüklemek, iPhone ve MacBook'larda hafif bulanık bir görsel demektir.
En pratik çözüm, görselleri maksimum gösterim genişliğinin iki katında hazırlamak; ama dosya boyutu aynı oranda artmasın diye iyi sıkıştırmak. WebP'de iyi sıkıştırılmış 800px'lik bir görsel, çoğu zaman optimize edilmemiş 400px'lik bir PNG'den daha hafiftir.
Her duruma uygun format
| Durum | İdeal format | Neden |
|---|---|---|
| Fotoğraflar (ürün, banner, ekip) | WebP lossy | Aynı kalitede JPG'den %25–35 daha küçük |
| Header logosu | SVG | Vektörel, her ölçüde kayıpsız, en küçük dosya |
| SVG desteklenmediğinde logo | Şeffaf arka planlı PNG | Gereken şeffaflığı korur |
| Arayüz ikonları | SVG | Ölçeklenebilir, CSS ile hareketlendirilebilir, çok küçük dosya |
| Metin içeren ekran görüntüsü | WebP lossless ya da PNG | Net metin — JPG harflerin çevresinde bozulma yaratır |
| Open Graph / sosyal önizleme | JPG ya da WebP | Önizleme platformlarıyla en yüksek uyumluluk |
| Şeffaflık içeren arka plan | Alfa kanallı WebP ya da PNG | PNG dışında şeffaflık sunan tek format |
Yüklemeden önce görselleri nasıl hazırlarsınız
Bir siteye gidecek her görsel için önerilen akış şöyle:
- Kullanım ölçüsünü belirleyin. Bu görsel düzende en fazla ne kadar yer kaplayacak? Yukarıdaki referans tablosunu kullanın ya da tarayıcıda ögeyi inceleyin (F12 → görselin alanını seçin).
- Gösterim alanının iki katına boyutlandırın. Retina ekranları aşırı israf olmadan karşılamak için. Piksel cinsinden tam genişliği belirlemek üzere Boyutlandır aracını kullanın.
- WebP'ye çevirin. Siteniz ya da CMS'iniz WebP destekliyorsa (modern olanların çoğu destekliyor), yüklemeden önce çevirin. Hızlı dönüştürme için Dönüştür aracını kullanın.
- Sıkıştırın. Dosya boyutunu önerilen aralıklara indirmek için sıkıştırma uygulayın. JPG, PNG ve WebP'yi gözle fark edilir kayıp olmadan optimize etmek için Sıkıştır aracını kullanın.
- Sonucu kontrol edin. Sıkıştırılmış görseli açın ve orijinaliyle karşılaştırın. Fark gözle görülmüyorsa sonuç iyidir.
Site görsellerinizi hemen hazırlayın
Sitenizin görsellerini saniyeler içinde boyutlandırın ve sıkıştırın — kurulum yok, hesap yok.
Sitenizdeki görsellerin mevcut boyutunu kontrol etme
Sitenizdeki görsellerin optimize olup olmadığını anlamak için şu araçları kullanın:
- Google PageSpeed Insights (pagespeed.web.dev): URL'yi analiz eder, küçültme fırsatı olan görselleri listeler ve her biri için tahmini KB kazancını gösterir.
- Chrome DevTools → Network → Img: istekleri görsel türüne göre süzün ve yüklenen her dosyanın boyutunu görün. En ağırlarını bulmak için boyuta göre sıralayın.
- WebPageTest.org: hangi görsellerin önce yüklendiğini ve ne kadar sürdüğünü gösteren, waterfall grafikli ayrıntılı analiz.
Sitelerde en sık yapılan görsel ölçüsü hataları
- Fotoğrafları doğrudan makineden yüklemek: makine fotoğrafları 3–12 MB ve 4000–8000px genişliğindedir. Hiçbir sitenin, önce boyutlandırılıp sıkıştırılmadan böyle görsellere ihtiyacı yoktur.
- Fotoğraflarda PNG kullanmak: PNG'deki fotoğraflar hiçbir görsel kazanç olmadan JPG ya da WebP'dekinden 5–10 kat büyür. PNG'yi yalnızca şeffaflık içeren görsellerde ya da keskin kenarlı grafiklerde kullanın.
- Görsellerin mobil sürümünü hazırlamamak: 390px'lik bir telefona 1920px'lik görsel sunmak katıksız israftır. HTML'in
srcsetözniteliği bunu kendiliğinden çözer. - Open Graph görsellerini unutmak: biri WhatsApp'ta ya da LinkedIn'de önizleme görseli tanımlanmamış bir sayfayı paylaştığında platform genel ya da boş bir küçük görsel gösterir. Her zaman
og:imagemeta etiketini 1200×630px'lik bir görselle tanımlayın. - Logoyu JPG olarak kullanmak: JPG'nin dayattığı beyaz arka plan, renkli ya da şeffaf zeminlerde ortaya çıkar. Logo her zaman SVG ya da PNG olmalı.