E-posta Kodunun 102'si: Resimlerle Çalışmak

Önünüze dökülen kodu görmek inanılmaz derecede korkutucu ve bazen sinir bozucu olabilir. Size söz veriyorum, pazarlamacıdan pazarlamacıya, göründüğünden çok daha kolay. Ayrıca, e-posta HTML'sinde gezinmek inanılmaz derecede değerli bir beceridir. E-posta koduyla ilgili temel bilgiler serimizde, e-posta kodunu daha rahat kullanabilmeniz için bilmeniz gereken e-posta HTML temellerini size öğreteceğiz.

Son gönderimizde, bağlantıları nasıl güncelleyeceğinizi veya hızlı kopya değişiklikleri yapmayı hızlandırmak için e-posta kodunuzda nasıl gezinebileceğinizi ele aldık . Peki ya görüntüler?

Görüntüler, birçok yüksek performanslı e-postanın bel kemiğidir. Ancak, sürekli artan karmaşıklık ve çeşitli dosya türleri, boyutları, erişilebilirlik ve dikkate alınması gereken yükleme süreleri ile en yetenekli pazarlamacıları bile bunaltabilir.

Bu makalede, e-postanıza resim eklemenin en yaygın yollarından bazılarına değineceğiz ve abonelerinizin harika bir deneyim yaşamasını sağlamak için temel bilgileri gözden geçireceğiz. Görüntüler üzerinde derin bir dalış yapmak istiyorsanız şu kılavuzlara göz atın:

• E-postadaki Arka Plan Resimleri için Nihai Kılavuz
• E-postada Animasyonlu GIF'lere Yönelik Bir Kılavuz
• HTML E-postasında Görselleri Kullanma

Bu kılavuzda yer alan konuları kolayca takip edebilirsiniz, bu yüzden devam edin ve Litmus Builder'da bir e-posta açın, başlayalım!

Resminizi hazırlayın

Resminizi e-postanıza eklemeden önce, başarılı olacak şekilde ayarlandığından emin olun. Öncelikle, kullandığınız görüntünün e-posta için iyi bir dosya türü ve boyutu olduğundan emin olun . Büyük dosya boyutları, yükleme sürenizi yavaşlatarak genel dönüşümlerinizi ve etkileşiminizi azaltır; bu nedenle, hızlı yüklenen hafif bir resim kullandığınızdan emin olun.

Resminizi ekleyin

Resmi kodunuzda nereye eklemek istediğinizi bulun—Litmus Builder kullanıyorsanız, bir resmin görünmesini istediğiniz yeri tıklatmak için Izgara Görünümü'nü çevirin ve ardından kod görünümüne tıklayın. Mükemmel noktayı bulduğunuzda, resminize eklemek için <img> etiketini kullanın, ancak buradaki URL'yi resminize doğrudan bir bağlantıyla değiştirin.

Doğrudan bağlantının ne olduğundan emin değilseniz, dosya adının sonuna bakın, “.png”, “.jpg” veya “.gif” gibi bir resim dosyası türüyle bitmelidir. Klasörlere veya HTML'ye bağlantılar burada çalışmaz, doğrudan e-postanıza eklediğiniz resme işaret etmesi gerekir.

 <img src="img-url.jpg" />

Bu kadar! Etiketinizi ekledikten sonra, Litmus Builder'daysanız resminiz önizleme bölmesinde gösterilir.

Resimlerinizi nerede barındırabileceğinizi merak ediyor musunuz? Çoğu ESP'nin, resimlerinizi yükleyebileceğiniz ve e-postanızdaki resim kaynağı için bu genel URL'leri kullanabileceğiniz bir dosya barındırma sistemi vardır, bu nedenle önce ESP'nizi kontrol ettiğinizden emin olun. ESP'niz görüntü dosyası barındırma hizmeti sağlamıyorsa, görüntü barındırma için Amazon'un AWS'sini veya kendi web sitenizin FTP sunucusunu kullanmayı düşünün.

Doğru boyutları bulun

Tüm monitörlerde harika görünmesi ve pikselleşme veya bulanıklık olmaması için, görüntünüzü eklemek istediğiniz alanın iki katı büyüklüğünde bir görüntü kullanmak en iyisidir . Önceki adımda oluşturduğunuz <img> etiketinize bir değiştirici ekleyerek resimlerinizin genişliğini ve yüksekliğini ayarlayın. Bunun gibi bir şey görünecek:

 <img src="img-url.jpg" width="400" height="100" />

E-postanız için anlamlı olana bağlı olarak genişlik ve yükseklik değerlerini ayarlayın. Bu değerlerle oynayabilir ve değişiklik yaparak nasıl göründüğünü görebilir, ardından bunların güncellendiğini görmek için Builder'daki önizleme bölmesine tıklayabilirsiniz.

ALT metni ekle

ALT metni bir görüntüyü açıklar, böylece e-posta istemcilerinde görüntüleri devre dışı bırakılmış olanlar veya bir ekran okuyucuya güvenenler e-postanızı kolayca okuyabilir. Örneğin, elimizde %20 indirim sunan bir promosyonun resmi varsa, teklifi açıklayan bir ALT metni eklemek, okuyucunuzu herhangi bir nedenle resimleri göremeseler bile tekliften haberdar eder.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

En iyi ALT metni açıklayıcıdır, özlüdür ve resminizle aynı amaca sahiptir. E-postanızı göndermeden önce Litmus Kontrol Listesi üzerinden çalıştırırsanız, kolayca girip güncelleyebilmeniz için eksik ALT metnini işaretleyeceğiz. Artık bir geliştiriciye danışmanıza bile gerek yok!

Resimleri değiştir

O tek resimle ilgili fikrini mi değiştirdin? İki seçeneğiniz var:

1. Yeni bir resim oluştururken olduğu gibi, resminize işaret eden URL'yi yenisiyle değiştirebilirsiniz. Bu, tüm boyutlarınızı, ALT metninizi veya resminizi şekillendirmeye yardımcı olabilecek başka her şeyi koruyacak ve sadece resim içeriğini güncelleyecektir.

Geçerli resim etiketini alın ve dosya yolunu arayın:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Yolu yeni görüntü yolunuzla değiştirin:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. Resminizin nerede barındırıldığına bağlı olarak, aynı konuma tam olarak aynı ada sahip yeni bir resim de yükleyebilirsiniz. Bu şekilde, e-postanızın resmini güncellemek için koda hiç dokunmanız gerekmez.

Mükemmel e-posta

Artık görüntüleri güncelleme ve değiştirme gücüne sahip olduğunuza göre, bu gücü akıllıca kullanın! E-postadaki resimler hızla bozulabilir. Yüklemesi uzun zaman alan ağır dosyalar, tüm e-postanız için görseller kullanmak veya tasarım için erişilebilirlikten vazgeçmek karmaşık abone deneyimleri yaratabilir.

Resim kitaplığınızı oluştururken aklınızda bulundurmanız gereken bazı hızlı en iyi uygulamalar şunlardır:

• Dosyaları hafif ve tatlı tutun , 1 MB altı en iyisidir ve ne kadar küçükse o kadar iyidir (Litmus Kontrol Listesi yükleme sürenizi kontrol eder, bu nedenle her bir görüntü boyutunu bilmiyorsanız endişelenmeyin.)
• Resimler görünmese bile e-postanızı okunaklı ve erişilebilir kılmak için alternatif metin ekleyin .
• Yalnızca resim içeren e-postalar göndermeyin ve e-postanızın canlı metin içerdiğinden emin olun. Tüm bir e-postayı bir resim kullanarak tasarlamak cazip gelebilir, ancak bu, resimleri devre dışı bırakanlar için uzun yükleme süreleri ve kötü deneyimlerle etkileşime ve dönüşümlere zarar verebilir.

Belirli bir acemi kodu sorusuyla ilgili yardıma mı ihtiyacınız var? Bu seride daha sonra ne görmek istediğinizi bize bildirin. Hiçbir soru çok basit değil!

_________________________________

E-postadaki resimler hakkında daha fazla bilgi edinin:

• Neden Yalnızca Resim E-postaları Göndermemelisiniz?
• E-postada Animasyonlu GIF'lere Yönelik Bir Kılavuz  
• HTML E-postasında Retina Görüntülerini Anlama
• PNG, GIF veya JPEG? E-posta için En İyi Resim Formatı Hangisi?  
• E-postada Animasyonlu GIF'ler: Dosya Boyutlarını Küçük Tutmak için 10 İpucu  
• E-postadaki Arka Plan Resimleri İçin En İyi Kılavuz
• E-postada Hareketli PNG'ler: GIF'lere Bir Alternatif mi?