Cara Memukau Setiap Pelanggan dengan Gambar Latar Belakang Email dengan Mudah (+ Kode untuk Melakukannya!)

Diterbitkan: 2021-07-23

Email dapat terasa sedikit dapat diprediksi dengan gambar di sini, blok teks di sana… Salah satu cara untuk menghidupkan pengalaman pelanggan? Gambar latar belakang. Mereka tidak terduga dan menambahkan dimensi lain ke desain Anda, membuat email Anda “pop”. Ketika dilakukan dengan baik, mereka membuat email Anda terasa seperti satu juta dolar tetapi sangat mudah dilakukan.

Baca terus untuk:

Manfaat gambar latar belakang
Contoh email yang menginspirasi
Pertimbangan desain
Cara membuat kode gambar latar belakang

Apa itu gambar latar? (Dan apa gunanya?)

Gambar latar belakang adalah gambar yang diterapkan ke latar belakang, atau di belakang, suatu elemen. Alih-alih menjadi titik fokus utama email, seperti gambar pahlawan, mereka lebih sering halus dan melengkapi konten lain dalam kampanye.

Manfaat utama menggunakan gambar latar adalah memungkinkan Anda untuk menempatkan konten HTML tambahan di atasnya. Tidak seperti gambar lain, di mana hanya gambar itu sendiri yang dapat ada di ruang itu, gambar latar belakang memberikan kemungkinan pelapisan, sehingga Anda dapat memiliki gambar, teks, atau ajakan bertindak (CTA) tambahan yang ada di dalam ruang yang sama.

contoh teks HTML langsung dan tombol antipeluru di atas gambar latar belakang

Menggunakan teks HTML langsung di atas gambar latar, alih-alih menyertakan teks itu sebagai bagian dari gambar, berarti pesan Anda dapat dibaca saat gambar dimatikan, menjadikannya teknik hebat untuk membuat email HTML yang lebih baik dan lebih mudah diakses.

Selain membantu membuat kampanye yang memberikan pengalaman membaca yang lebih baik, gambar latar juga menawarkan banyak kemungkinan desain, yang membedakan kampanye Anda dari kompetisi.

Cara kreatif merek menggunakan gambar latar belakang

Miro menempatkan gambar latar belakang yang berisi bentuk di belakang bagian pahlawan mereka, menarik perhatian ke judul utama dan pesan email, yang dilapis menggunakan teks langsung.

Email miro dengan gambar latar belakang — Sumber: Email Sangat Bagus

Uplers menggunakan gambar latar belakang untuk menyoroti diskon pada layanan mereka, dengan gambar kupon ditempatkan di belakang kode kupon.

Gambar latar belakang email Upler untuk kode kupon — Sumber: Email Sangat Bagus

Figma menambahkan pola latar belakang berulang yang halus ke badan email ini, memperkenalkan kami pada produk papan tulis baru mereka. Pola yang mereka tampilkan menggemakan latar belakang yang ditemukan dalam produk.

Gambar latar belakang figma di email — Lihat email ini di Pembuat Lakmus

Chipotle menempatkan gambar latar belakang jumbo di belakang area tubuh dan pahlawan jumbo yang berdampak ini, termasuk fotografi produk dan pola garis. Di atas gambar ini, mereka memiliki GIF animasi dengan latar belakang transparan, dan teks langsung di area tubuh.

Email pemberian Chipotle Friends dengan gambar latar belakang yang halus — Sumber: Email Sangat Bagus

GIF animasi juga dapat digunakan sebagai gambar latar belakang, seperti contoh dari Adobe Stock ini , yang mempromosikan koleksi meriah dengan konten pahlawan termasuk teks langsung dan tombol CTA yang ditempatkan di atas latar belakang animasi.

Email Adobe Stock dengan gambar latar GIF animasi — Sumber: Email Sangat Bagus

Pertimbangan desain

Saat berpikir tentang penerapan citra latar belakang, ada beberapa pertimbangan desain yang patut dipertimbangkan.

Kontras

Untuk memastikan semua pembaca mendapatkan nilai konten yang dihamparkan pada citra latar belakang, penting untuk memperhatikan kontras. Perlakukan gambar dengan cara yang sama seperti Anda memperlakukan warna datar, dan uji warna pada gambar Anda terhadap warna konten Anda.

Jika Anda mendesain menggunakan Figma, Anda dapat menambahkan plugin seperti Color Blind dan Contrast untuk melihat apakah Anda memenuhi Pedoman Aksesibilitas Konten Web (WCAG). Ada juga sejumlah aplikasi web, seperti Pemeriksa Kontras WebAim, tempat Anda dapat menguji warna dalam desain Anda.

Kesederhanaan

Cara lain untuk memastikan keterbacaan adalah dengan menjaga semuanya tetap sederhana. Latar belakang yang sibuk dapat mempersulit Anda untuk mendapatkan nilai dari teks langsung yang Anda tempatkan pada gambar Anda. Jadi, sering kali membantu untuk mempertimbangkan gambar latar belakang Anda sebagai peningkatan daripada fitur.

Penggantian warna solid

Karena tidak semua klien email akan menghargai citra latar belakang, rancang fallback warna solid. Pelanggan yang menggunakan klien email yang tidak mendukung citra Anda tetap dapat menikmati pengalaman hebat dengan warna solid. Pastikan untuk memilih warna mundur yang cocok dengan desain Anda dan sangat kontras dengan elemen latar depannya.

Cara membuat kode gambar latar belakang di email

Sebelum saya menelusuri kodenya, mari kita lihat klien mana yang akan merender gaya CSS latar belakang dan mana yang memerlukan bantuan fallback VML.

Kabar baiknya: Dukungan untuk CSS latar belakang sebaris telah meningkat, dengan klien webmail sekarang sepenuhnya mendukung metode ini, yang berarti atribut HTML latar belakang tidak lagi diperlukan.

Berita buruknya: Sayangnya, Windows 10 Mail tidak menyukai gambar latar belakang. Itu tidak akan merender CSS sebaris atau atribut latar belakang HTML yang tidak digunakan lagi. Dan menerapkan VML akan menyebabkan masalah rendering dengan pesan kesalahan 'gambar tidak dapat ditampilkan'.

Jika Anda khawatir tentang pengalaman yang diperoleh pelanggan Windows 10 Mail, pertimbangkan untuk tidak menggunakan VML. Ini memastikan bahwa warna latar belakang fallback memberi audiens Microsoft Outlook Suite Anda pengalaman membaca email yang luar biasa, tanpa hiasan tambahan.

bagaimana gambar latar belakang email terlihat di Windows 10 Mail

Dukungan klien email untuk gambar latar belakang

klien email	Menggunakan CSS sebaris	Menggunakan VML
Apple Mail 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013, 2016, 2019 (Windows 10)	✘	✓
Windows 10 Email	✘	✘
Aplikasi Gmail (Android 10)	✓	✘
Aplikasi Gmail (iOS 13.4.1)	✓	✘
Outlook (Android 7.0)	✓	✘
Outlook (iOS 12.0)	✓	✘
Samsung Mail (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
iPhone 12 (iOS 14.2)	✓	✘
Surat AOL (Tepi)	✓	✘
Gmail (Chrome)	✓	✘
Kantor 365	✓	✘
Outlook.com	✓	✘
Yahoo! Surat	✓	✘

Klien email mana yang digunakan pelanggan Anda?

Lihatlah pangsa pasar klien email Anda sendiri dengan Litmus Email Analytics. Lihat klien email mana yang Anda butuhkan untuk mengoptimalkan gambar latar belakang Anda. (Petunjuk: Jika Windows 10 Mail rendah, jangan khawatir.)

Pelajari lebih lanjut →

Sekarang setelah kita menyelesaikannya, mari kita bicara kode!

Salah satu hal menyenangkan tentang membawa citra latar belakang ke dalam email Anda adalah ada beberapa cara berbeda untuk mencapainya. Anda dapat mengisi bagian kecil atau menutupi badan email Anda, menggunakan satu gambar atau pola berulang, dan Anda dapat mengganti citra latar belakang tergantung pada apakah pembaca Anda menggunakan desktop, seluler, Mode Terang, Mode Gelap, atau bahkan saat mereka mengarahkan atau menggulung gambar Anda.

Setiap teknik membutuhkan pendekatan yang berbeda, jadi mari kita lihat cara terbaik untuk mengkodekannya.

Gambar latar belakang yang ditentukan lebar atau tetap

latar belakang lebar tetap

Saat menerapkan gambar latar belakang, sebaiknya tambahkan kode Anda ke sel tabel yang berisi. Menerapkan ke elemen HTML lain seperti <table> atau <body> tidak mungkin mendapatkan dukungan dari beberapa klien email. Inilah yang seharusnya terlihat seperti ini:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Di sini, gambar dibuat agar sesuai dengan lebar dan tinggi sel dengan menyertakan background-size:cover dalam gaya CSS sebaris dan kemudian diposisikan ke tengah. Menambahkan gaya ini memungkinkan Anda menggunakan gambar 2x—artinya Anda akan melihat rendering yang tajam pada layar retina—dan ukurannya akan diubah agar pas dengan wadah Anda, bahkan saat wadah diubah ukurannya untuk dirender pada perangkat yang berbeda.

Namun, ini juga berarti jika gambar Anda terlalu kecil atau tidak berukuran proporsional dengan wadahnya, gambar mungkin terlihat berpiksel atau melebar. Apalagi jika itu fotografi.

Apakah gambar latar belakang Anda berfungsi?

Lihat cara kerja kode kami untuk gambar latar di email Anda sendiri di seluruh aplikasi email paling populer seperti Gmail dan Outlook.

Pelajari lebih lanjut →

Saat ini, sebagian besar klien email mendukung gaya latar belakang CSS sebaris, sehingga Anda dapat menambahkan gambar latar belakang dan warna mundur menggunakan properti CSS singkatan latar belakang. Dengan kata lain, cukup terapkan ini pada gaya 'latar belakang'. Sayangnya, penataan latar belakang lebih lanjut tidak bekerja terlalu baik dengan steno saat mengkodekan inline, sehingga pemosisian atau ukuran apa pun perlu ditulis sebagai gaya terpisah. Misalnya, menggunakan background-position: center; ukuran latar belakang: 80%; alih-alih latar belakang: tengah/80%; .

Membuat ini berfungsi di Outlook dengan fallback VML

Outlook dan Office 365 untuk desktop juga memerlukan sedikit bantuan untuk menampilkan gambar latar belakang, karena keduanya tidak akan merender gaya latar belakang CSS. Untuk menampilkan gambar latar belakang kami di klien email ini, kami perlu memanfaatkan teknik yang dipopulerkan oleh Stig Morten Myre untuk Monitor Kampanye, dan menerapkan Vector Markup Language (VML) Microsoft.

Mengambil kode yang telah kami buat, kami menempatkan VML yang diperlukan dan <div> yang berisi di dalam sel tabel kami:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Untuk gambar yang perlu mengisi wadah tanpa mengulang, kita perlu menggunakan 'bingkai' di dalam tag vml:fill. Dengan cara ini, Anda dapat menggunakan citra 2x dalam tag ini. Pastikan Anda menyetel lebar penampung menggunakan gaya sebaris pada tag v:rect (dalam contoh di atas, disetel ke 600px).

Jika Anda ingin bantalan pada wadah Anda, sesuatu yang mungkin Anda temukan adalah menempatkan VML di dalam wadah akan membuat bantalan runtuh. Cara kami memperbaikinya adalah dengan membungkus VML di sekitar wadah kami, jadi kami perlu membuat sarang wadah kami di dalam tabel lain seperti:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Gambar latar berulang

Anda juga dapat menambahkan latar belakang yang berulang di dalam wadah tempat Anda meletakkannya. Contoh yang bagus adalah mengulangi pola di seluruh isi email Anda.

contoh gambar latar berulang

Jika gambar yang kita tempatkan di sel wadah kita lebih kecil dari wadah, maka secara otomatis akan berulang baik secara horizontal maupun vertikal. Untuk mengulang hanya dalam satu arah, gaya dengan CSS 'background-repeat' dan tambahkan nilai repeat-x untuk mengulang secara horizontal atau repeat-y untuk mengulang secara vertikal.

Untuk mengisi seluruh wadah dengan pola yang sepenuhnya berulang, kodenya sangat sederhana:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Membuat ini berfungsi di Outlook dengan fallback VML

Sekali lagi, jika Anda ingin melihat latar belakang Anda dirender di klien Outlook, Anda dapat menerapkan VML. Kodenya sedikit berbeda kali ini, dengan VML ditempatkan sebelum container:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Untuk membuat latar belakang berulang, isi tag v:fill dengan jenis 'tile'. Tidak mengherankan, ada beberapa masalah rendering dengan Windows 10 Mail, dan dengan latar belakang yang berulang, masalah rendering bisa jauh lebih tidak sedap dipandang. Jadi, mengabaikan VML mungkin merupakan pendekatan teraman jika Anda memiliki pelanggan Windows 10 Mail.

Teknik tingkat lanjut

Citra latar belakang yang diperbaiki dan berulang menawarkan banyak peluang untuk meningkatkan desain email Anda, tetapi masih ada lagi:

Pertukaran gambar kontras

Sekarang Mode Gelap tersedia di beberapa klien email—dan menghormati preferensi pelanggan membantu Anda menjangkau audiens yang lebih luas dan membangun kepercayaan—mengalihkan gambar latar belakang Anda adalah cara yang bagus untuk melengkapi desain Mode Gelap atau terang. Dan itu adalah peningkatan yang menyenangkan dan sederhana juga.

mode kontras

Untuk menerapkan ini, Anda perlu menambahkan beberapa CSS yang disematkan ke kueri media Mode Gelap. Ini akan memastikan gambar latar Mode Gelap Anda ditampilkan dalam klien email yang akan mendukung jenis kueri media ini:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Sebaiknya tambahkan warna fallback gelap. Ini akan membantu klien email yang tidak akan memuat gambar tanpa pembaca mengambil tindakan dan memastikan pesan Anda dapat dibaca saat gambar Anda belum dimuat.

Sekarang, di HTML Anda, terapkan kelas Anda ke sel yang berisi gambar latar belakang mode cahaya Anda. Sederhana!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Perhatikan : Sesuatu yang sulit untuk dirancang, dan bahkan lebih sulit untuk dikodekan, adalah klien email yang membalikkan warna email Anda dalam lingkungan Mode Gelap, sepenuhnya mengabaikan semua kerja keras yang Anda lakukan untuk menulis kueri media Mode Gelap.

Hampir tidak mungkin untuk mendapatkan klien email ini. Namun, Anda dapat bermain-main dengan gambar latar belakang yang memiliki tingkat transparansi, dan menerapkan warna latar belakang kontras tinggi ke wadah Anda, seperti putih untuk mode terang dan hitam untuk Mode Gelap. Ini akan memungkinkan warna latar belakang dibalik. Saya mencoba ini dengan contoh berikut:

gambar latar belakang email dalam skenario Mode Gelap yang berbeda

Gambar latar belakang chevron saya memiliki opacity 30% pada panah dan sepenuhnya transparan di antara mereka. Ini berarti bahwa ketika klien email yang menyinggung mengambil kendali atas rendering Mode Gelap saya, konten dapat dibaca.

Untuk informasi lebih lanjut tentang pengkodean untuk Mode Gelap dan dukungan klien email, lihat Panduan Utama kami untuk Email Mode Gelap.

Latar belakang interaktif

Bagaimana menyenangkan pelanggan dengan beberapa interaktivitas? Anda dapat menyebarkan sedikit kegembiraan dengan efek hover atau rollover sederhana, mengubah latar belakang wadah Anda saat pembaca memindahkan kursor mereka ke konten Anda.

aktifkan gambar latar belakang email saat mengarahkan atau memutar

Anda memerlukan sedikit CSS yang disematkan untuk membuat yang ini berfungsi. Tempatkan ini di dalam tag <style> Anda:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Sekarang yang perlu Anda lakukan adalah menerapkan kelas ini ke sel tabel Anda, seperti:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Tingkatkan desain Anda

Dengan banyak peluang, menggunakan gambar latar belakang untuk menyempurnakan desain email Anda adalah cara yang bagus untuk mendorong amplop dan membuat email Anda menonjol di antara orang banyak. Untuk membantu Anda mempraktikkan teknik-teknik ini, kami telah membuat sumber daya yang berguna di mana Anda dapat mengambil kode yang ditampilkan dalam posting ini.

Kami akan senang melihat bagaimana Anda menggunakan gambar latar belakang di email Anda—bagikan contoh Anda di komentar di bawah.

Pastikan gambar latar belakang Anda berfungsi—dengan Litmus

Apa itu bekerja? Pratinjau gambar latar belakang Anda (dan sisa email Anda) di lebih dari 100 klien email, aplikasi, dan perangkat dengan Litmus. Dan sapalah email merek yang bebas kesalahan.

Mulai uji coba gratis Anda →

Awalnya diterbitkan pada 24 Mei 2019, oleh Jason Rodriguez. Terakhir diperbarui 21 Juli 2021.