E-posta bültenlerinde hero görseli: dosya boyutu, genişlik ve above the fold düzeni
Bülten hero görsellerinde dosya ağırlığı, genişlik ve üst katman düzeni; teslim edilebilirlik ve tıklama için ipuçları.
Giriş
E-posta bültenlerinde hero görseli, açılışta markanızı ve teklifi taşır; ancak ağır dosyalar yüklenmeyi geciktirir, metin önce gelirse düzen bozulur. Birçok istemci görselleri varsayılan olarak kapalı açar—bu yüzden başlık + CTA her zaman tek başına çalışmalıdır. Bu yazıda dosya boyutu, tipik genişlikler, fold düzeni ve test önerilerini bir araya getiriyoruz.
Bu serinin önceki yazısı: WebP ve AVIF: yayın ve tarayıcı uyumluluğu. Görsel sıkıştırma bağlamında küçük dosya, büyük etki rehberimiz de faydalıdır.
Dosya boyutu ve format
- Çoğu istemci harici CSS ile sınırlıdır; tek parça, optimize JPG/WebP/GIF kullanın.
- 600–800 px genişlikte hero için ~150–300 KB hedefi sık kullanılır; abonelerin çoğu mobilde açar.
- Retina için
@2xkaynağı üretin ancak e-postada tek URL ile sınırlı kalın; aşırı çözünürlük gereksiz yükleme yapar.
Litmus ve benzeri kaynaklarda e-posta HTML sınırları anlatılır; Litmus blog üzerinden güncel istemci davranışlarını takip etmek iyi bir alışkanlıktır.
Genişlik ve “above the fold”
- Tasarım genelde 600 px civarı sabit genişlikle test edilir; hero tam genişlik veya merkez hizalı olabilir.
- Üstte net bir başlık + tek CTA ile görseli destekleyin; görsel yüklenmese bile mesaj anlaşılmalıdır.
- CAN-SPAM ve izin gibi düzenlemeler metin ve gönderici bilgisini önemser; görsel yedek metin (alt) eklemeyi unutmayın.
Görsel kapalı senaryo
Görseller kapalıyken marka kaybolmasın diye e-postada görsel yokluğu rehberindeki metin ağırlıklı şablon ilkelerini uygulayın.
Yayın öncesi mini kontrol listesi
- Görsel kapalı önizleme (çoğu ESP’de “images off” modu).
- Mobil genişlikte taşma ve küçük font kontrolü.
- Aynı hero’yu web’de kullanacaksanız boyut ve format ayrımı (WebP/AVIF).
SEO ve analitik
E-postanın kendisi arama indeksinde sayfa gibi çalışmaz; ancak kampanya tutarlılığı ve açılış sayfası görselleri SEO’yu etkiler. Aynı hero’yu web’de kullanacaksanız blog kapak görseli ipuçları ile uyumlu boyut seçin.
İngilizce paralel
Email newsletter hero images aynı konuyu İngilizce özetler.
Sonuç
Hero görselini hafif, sabit genişliğe uygun ve mesajı destekleyen tutun. Kırpma ve yeniden boyutlandırma ile bülten ölçülerine kilitleyin; dönüştürme ile web varyantı üretin.