Blog Kapak Görseli Boyutu Kaç Olmalı?
Blog kapak görseli hem sayfada hero görevi üstlenir hem de paylaşım önizlemesinde OG görseli olarak kullanılır. Bu iki bağlamın boyut ve oran gereksinimleri her zaman örtüşmez. Hero alanı için ideal oran ile OG standardı olan 1200×630 farklı sonuçlar üretebilir; CMS'in yazı listesi sayfasında otomatik oluşturduğu thumbnail ise üçüncü bir kırpma bağlamı ekler. Tek dosyayla bu üçünü sağlıklı biçimde karşılamak mümkündür, ama bunun için boyut ve oran kararını yalnızca "kaç piksel?" sorusuna yanıt olarak değil, hangi yüzeyde nasıl görüneceğini göz önünde tutarak vermek gerekir.
Pratikte çoğu blog teması kapak görselini 16:9 veya buna yakın yatay bir oranla işler. Bu oran 1200×630 OG standardıyla neredeyse örtüşür; 16:9 değeri 1.78:1, OG'nin 1200×630'u ise yaklaşık 1.90:1'dir. Aradaki fark küçük görünse de platform kırpma davranışı ve tasarımdaki güvenli alan kararları bu ayrımı hissedilir hale getirebilir.
Boyut kararı performansı da doğrudan etkiler. Blog kapak görseli çoğunlukla sayfanın en üstünde, ilk yüklenen görsel olarak yer alır. LCP (Largest Contentful Paint) metriğine katkıda bulunan bu görsel için dosya boyutu ve yükleme önceliği, görsel kalite kadar önem taşır. Kaç piksel üretileceği ile dosyanın kaç kilobayt olduğu bu nedenle birlikte değerlendirilmesi gereken iki ayrı parametredir.
Hero alanında kapak görseli: görüntüleme boyutu ve dosya boyutu
Blog yazısı sayfasında kapak görseli genellikle içerik sütununun tamamını veya ekranın tüm genişliğini kaplayan bir hero alanında görüntülenir. İçerik sütunu genişliği temaya göre değişir; 800 ile 1200 piksel arasında en yaygın aralıktır. Tam genişlik hero kullanan tasarımlarda ise 1400-1600 piksel görüntüleme genişliğine kadar çıkılabilir.
Bu görüntüleme genişlikleri için retina desteği de hesaba katıldığında dosya boyutu şöyle belirlenir: görüntüleme genişliğinin iki katı. İçerik sütunu 1000 piksel genişliğindeyse 2000 piksel genişliğinde bir dosya, 2x ekranlarda tam netliği sağlar. Tam genişlik hero için 1600 pikselin iki katı olan 3200 piksel teknik olarak doğrudur; ancak bu boyutu gerçekten zorunlu kılan senaryo oldukça sınırlıdır. Pratikte 1600 piksel genişliğinde bir dosya hem 1x hem de 2x ekranların büyük çoğunluğunu yeterli netlikle karşılar.
Hero görselinin optimize edilmesi konusunda dosya boyutu kadar yükleme önceliği de kritiktir. Blog kapak görseli için loading="eager" ve fetchpriority="high" attribute'larını HTML'e eklemek, tarayıcının bu görseli öne almasını sağlar. Lazy loading kapak görseline uygulanmamalıdır; ilk ekranda görünen ve LCP hesabına giren bir görsel ertelenmemelidir.
width ve height attribute'larını gerçek dosya piksel boyutlarıyla eşleştirmek ise layout kaymasını önler. Tarayıcı görsel yüklenmeden önce doğru alanı rezerve eder ve sayfa içeriği aşağı kaymaz. Bu iki attribute'u atlamak performans metriklerine görünmez ama ölçülebilir zarar verir.
OG görseli olarak kapak: aynı dosya iki bağlamı karşılayabilir mi
Blog yazısı paylaşıldığında sosyal platformlar sayfanın <meta property="og:image"> etiketini okur ve kapak görselini önizleme kartında kullanır. Eğer OG image etiketi ayrıca tanımlanmamışsa bazı CMS'ler kapak görselini otomatik olarak OG görseli olarak atar. Bu durumda kapak görseli iki işlevi birden üstlenir.
Bu çift kullanımın sorunsuz çalışması için kapak görselinin oranı önemlidir. OG görsel standardı olan 1200×630, yaklaşık 1.90:1 oranına karşılık gelir. 16:9 kapak görseli bu alana küçük bir kırpma payıyla girer; çoğu içerik için fark edilmez. Kapak görseli 2:1 veya daha geniş üretilmişse kırpma daha belirgin olur.
Güvenli alan prensibi burada belirleyicidir: başlık, logo veya ana görsel öğe gibi kritik içerikler görselin merkez yüzde yetmişlik alanında konumlandırılmalıdır. Bu yaklaşım hem OG kırpmasını hem de CMS thumbnail kırpmasını aynı anda tolere eder. Kenar bölgeler boş ya da dekoratif arka plan olarak bırakıldığında kırpma görsel bütünlüğü açısından sorunsuz geçer.
Ayrı bir OG görseli üretmek daha fazla kontrol sağlar; başlık metnini veya marka öğelerini tam oranıyla OG boyutuna yerleştirmek mümkün olur. Ancak her yazı için iki görsel üretmek operasyonel yük getirir. Kapak görseli tasarımında güvenli alan prensibi gözetiliyorsa tek dosyayla her iki bağlamı karşılamak çoğu proje için yeterlidir.
Dikey ve yatay oran arasındaki tercih
Blog kapak görseli için yatay oran neredeyse evrensel standarttır. 16:9, 3:2, 2:1 ve 1.90:1 gibi değerler farklı temalarda görülür; tamamı yatay formattadır. Bunun işlevsel bir nedeni vardır: blog yazısı sayfasında hero alanı genellikle ekranın yatay genişliğini tamamen kaplar ama yükseklikte kısıtlı kalır. Dikey bir görsel bu alanda ya kenar boşluklarıyla küçük kalır ya da orantısız biçimde kırpılır.
Pinterest gibi içerik platformları dikey görseli tercih eder; 2:3 veya daha uzun oranlar orada avantaj sağlar. Ama bu durum blog yazısı kapağına değil, platforma özgü içerik görseline uygulanır. İkisini aynı dosyayla karşılamak pratikte mümkün değildir; platform için ayrı bir görsel üretmek daha temiz bir yaklaşımdır.
Bazı tasarımlarda kapak görseli sayfanın en üstünde tam genişlik görünürken yazı listesi sayfasında kare thumbnail olarak da görünür. Bu senaryo özellikle dikkat gerektirir; kare kırpma görüntüleme bağlamında daha yıkıcı sonuç üretir. Yatay bir görselin kareye kırpılması genellikle merkezi alır; bu nedenle kapak görselinde ana odak noktasının yatay eksende de merkezde konumlanması güvenli bir pratiktir. Solda ya da sağda yoğunlaşan bir kompozisyon kare thumbnail'da yarısını kaybedebilir.
CMS platformlarında otomatik kırpma ve thumbnail mantığı
WordPress kapak görselini yazı listesi sayfasında, ilgili yazılar bölümünde ve RSS önizlemelerinde farklı boyutlarda kullanır. Bu boyutlar tema tarafından add_image_size() fonksiyonuyla tanımlanır; genellikle 4:3, 16:9 veya 1:1 thumbnail'lar otomatik oluşturulur. Yüklenen orijinal görsel bu boyutlara kırpılırken WordPress varsayılan olarak görselin merkezini baz alır. Kırpma odak noktasını değiştirmek için ek eklenti ya da tema desteği gereklidir.
Ghost, Webflow, Notion gibi platformlar da benzer otomatik kırpma davranışı sergiler. Thumbnail boyutları CMS'e göre değişir; bazı platformlar kırpma önce görselin en-boy oranını koruyarak küçültür, bazıları ise sabit oran uygular. Hangi davranışın geçerli olduğunu bilmeden üretilen görsel beklenmedik bir thumbnail sonucu doğurabilir. Bu nedenle üretim öncesinde temanın liste sayfasında görselleri nasıl işlediğini kontrol etmek operasyonel açıdan yerinde bir adımdır.
Bazı CMS'lerde kapak görseli yüklenirken "odak noktası" seçmek mümkündür. Bu özellik, kırpma işleminin görselin neresini merkezleyeceğini belirler. Sağ üstte konumlanmış bir logonun kare kırpmada kaybolmaması için odak noktasını sağ üste taşımak bu aracı olan platformlarda sorunsuz sonuç verir. Bu özellik yoksa güvenli alan prensibine dönmek en pratik çözümdür: kritik içeriği merkezde tutmak.
Retina desteği için CMS'lerin srcset üreten versiyonları bu thumbnail'lar için otomatik 2x alternatif de oluşturur. WordPress'in wp_calculate_image_srcset() mekanizması, yüklenen büyük görsel dosyasından farklı boyutlar türetir ve bunları srcset üzerinden sunar. Yüklenen orijinal dosya bu zincirin temelidir; dosya yeterince büyük üretilmişse küçük versiyonlar buradan güvenilir biçimde türetilir. Küçük üretilen bir orijinalden büyütme yoluna gidilirse bu zincir çalışmaz.
Retina için üretim boyutu ve dosya ağırlığı dengesi
Blog kapak görseli için 1600 piksel genişlik çoğu proje için güvenli ve yeterli bir başlangıç noktasıdır. Bu değer; 800 piksellik içerik sütununu 2x ile karşılar, 1200 piksellik sütunu 1x'te tam doldurur ve aynı zamanda makul bir dosya boyutunda kalır. 2000 veya 2400 piksel üretmek teknik olarak daha yüksek bir tavan sağlar; ama bu fark çoğu ekranda görsel olarak algılanamaz ve dosya boyutunu gereksiz yere artırır.
Dosya ağırlığı için hedef aralık fotoğraf içerikli kapaklarda 100-300 KB, illüstrasyon veya düz renk ağırlıklı kapaklarda 50-150 KB civarıdır. Bu değerlerin üzerinde kalmak LCP süresini doğrudan uzatır. Kalite bozmadan dosya boyutunu küçültmek için WebP formatı JPEG'e kıyasla çoğu içerikte yüzde yirmi beş ile otuz beş arasında kazanım sağlar; aynı görsel kalitesinde daha küçük dosya üretir.
Format seçiminde pratik çerçeve şudur: fotoğraf içerikli kapaklar için WebP lossy, 75-85 kalite aralığı; tipografi veya grafik ağırlıklı kapaklar için kaliteyi 85-90'a çıkarmak metin netliğini korur. AVIF daha iyi sıkıştırma oranı sunar ama eski tarayıcı desteği için hâlâ fallback gerektirir. <picture> etiketi kullanılarak AVIF-WebP-JPEG zinciri kurulabilir; bu yaklaşım destekleyen tarayıcılara daha küçük dosya sunarken daha geniş uyumluluğu da korur.
Blog kapak görseli boyutu tek bir sayıya indirgenmesi güç bir karardır çünkü aynı dosya farklı sistemlerde farklı bağlamlarda kullanılır. Hero, OG, thumbnail — her biri farklı oran ve boyut gerektiren ayrı bir yüzeydir. Bu üçünü tek dosyayla makul biçimde karşılayan orta yol çoğu blog için şöyledir: 1600 piksel genişlik, 16:9 oran, WebP formatı, 100-300 KB dosya boyutu, kritik içerik merkez yüzde yetmişlik alanda. Bu parametreler sağlandığında büyük platformların ve yaygın CMS'lerin büyük bölümü tutarlı sonuç üretir.
Her projenin kendine özgü koşulları bu çerçeveyi kısmen değiştirebilir. Tema thumbnail oranı 4:3 ise kapak görselini bu orana göre tasarlamak daha iyi bir liste sayfası deneyimi üretir. OG önizlemesi markayı çok daha belirgin şekilde taşıması gerekiyorsa ayrı bir OG görseli üretmek ekstra iş olsa da kontrol açısından değer taşır. Performans önceliği yüksekse dosya boyutunu 100 KB'ın altında tutmak için agresif WebP sıkıştırması uygulanabilir; görsel kalite fotoğraf içeriğinde bu düzeyde sıkıştırmayı çoğunlukla tolere eder.
Başlangıç noktası olarak mevcut temada birkaç kapak görselinin nasıl işlendiğini — liste sayfasında, yazı sayfasında ve paylaşım önizlemesinde — gözlemlemek, sayfa sayfa boyut testi yapmaktan çok daha hızlı bir çerçeve sunar. Sorun bu gözlemden sonra görünür hale gelir ve çözümü de o andan itibaren somut hale gelir.