E-posta İstemcilerinde Görsel Yönetimi

Birçok istemci, kullanıcı "görselleri göster" seçeneğine tıklayana kadar görselleri varsayılan olarak engeller. Outlook, Gmail (bilinmeyen gönderenler için) ve ölçümlü bağlantı kullanan çoğu mobil istemci bunun yerine bir yer tutucu gösterir. Görsellerin görünmeyebileceğini varsayarak tasarım yapın.

Önemli metinleri (başlıklar, CTA etiketleri, fiyatlar) asla görsellere gömmeyin. Mesajın görseller engellendiğinde bile ulaşması, ekran okuyucuların metni okuyabilmesi ve karanlık modun renkleri uygun şekilde tersine çevirebilmesi için satır içi CSS ile stillendirilmiş HTML metni kullanın.

Her <img> için açıklayıcı bir alt özniteliği gerekir. Görseller engellendiğinde alt metni yer tutucu kutusunda görünür; iyi yazılmış alt metni, görselin iletmesi gereken mesajla görsel boşluğunu doldurur.

Açıkça belirtilmiş boyutlar olmadan yer tutucu daralır ve görsel yüklendiğinde yerleşim değişir. Görselin yüklenip yüklenmemesinden bağımsız olarak hücrenin yer ayırması için her iki özniteliği (ve karşılık gelen satır içi stili) ayarlayın.

Outlook, satır içi görsellerin altına küçük bir boşluk ekler. Bu boşluğu ortadan kaldırmak ve tüm istemcilerde tutarlı dikey ritim sağlamak için her <img> üzerinde style="display:block" uygulayın.

Daha eski istemciler <a><img></a> çevresine mavi bir kenarlık ekler. Görsel özniteliğinde border="0" ayarlayın ve eylem çağrılarının içindeki sarılı görsellerin temiz görünmesi için satır içinde style="border:0" kullanın.

E-posta istemcilerinin "bu sayfa" kavramı yoktur. Her görselin src değeri, herkese açık bir CDN'yi gösteren mutlak bir https:// URL'si olmalıdır. Yerel yollar, göreli yollar ve http:// URL'leri (karma içerik) sessizce yüklenemez.

Hızlı ve coğrafi olarak dağıtılmış bir görsel barındırma hizmeti kullanın. Bazı istemciler görselleri proxy'ler üzerinden alır (Gmail bunlardan biridir) ve kendi önbellekleme katmanlarını ekler; birinci taraf CDN'leri yavaş bir kaynaktan aşırı yükleme yapılmasını önler ve görsellerin bölgeler arasında tutarlı biçimde yüklenmesini sağlar.

Başlık alanı arka planlarında CSS background-image değerini, baskın tonla eşleşen bir bgcolor değeriyle birlikte kullanın. Görsel engellenirse hücre yine makul bir renk gösterir ve bgcolor üzerine yerleştirilen metin okunabilir kalır; böylece beyaz metnin beyaz blok üzerinde kalması gibi bir felaket önlenir.

Yüksek DPI ekranlarda keskin görünmeleri için görselleri 2 kat boyutta oluşturup width özniteliğiyle küçültün: width="300" height="300" ile gösterilen 600x600 kaynak, Retina'da net görünür. Bunun bedeli bant genişliğidir; bu nedenle WebP eşdeğeri sıkıştırmayla dosya boyutlarını küçük tutun.

Hareketli GIF'ler, yalnızca ilk kareyi gösteren Outlook dışındaki çoğu istemcide çalışır. İlk kareyi sabit bir görsel olarak anlamlı olacak şekilde tasarlayın; başlık, CTA veya temel değer animasyonun geri kalanı olmadan da okunabilir olmalıdır.

Önemli metinler (başlıklar, CTA etiketleri, fiyatlar) HTML e-postasında neden asla görsellere gömülmemelidir?

Görselleri mesajın kendisi olarak değil, geliştirme unsuru olarak değerlendirin. Mutlak https URL'leri kullanın, width/height/display:block/border:0 ayarlayın, anlamlı alt metinleri yazın, hızlı bir CDN'de barındırın, arka planları bgcolor yedekleriyle birlikte kullanın, Retina için 2 kat boyutta tasarlayın ve Outlook'un GIF'leri ilk karede dondurduğunu unutmayın.