102 Kode Email: Bekerja dengan Gambar

Diterbitkan: 2020-05-01

Melihat kode tumpah di depan Anda bisa terasa sangat menakutkan, dan terkadang membuat frustrasi. Saya berjanji kepada Anda, dari pemasar ke pemasar, bahwa ini jauh lebih mudah daripada yang terlihat. Plus, mampu menavigasi email HTML adalah keterampilan yang sangat berharga. Dalam seri dasar-dasar kode email kami, kami akan mengajari Anda dasar-dasar HTML email yang perlu Anda ketahui agar lebih nyaman dengan kode email.

Dalam posting terakhir kami, kami membahas bagaimana Anda dapat menavigasi kode email Anda untuk mengetahui cara memperbarui tautan atau membuat perubahan salinan cepat. Tapi bagaimana dengan gambar?

Gambar adalah tulang punggung dari banyak email berkinerja tinggi. Namun, dengan kompleksitas yang terus meningkat dan berbagai jenis file, ukuran, aksesibilitas, dan waktu muat untuk dipertimbangkan, ini dapat membuat pemasar yang paling terampil pun kewalahan.

Dalam artikel ini, kami akan menyentuh beberapa cara paling umum untuk menambahkan gambar ke email Anda dan membahas dasar-dasarnya untuk memastikan pelanggan Anda mendapatkan pengalaman yang luar biasa. Jika Anda mencari gambar yang mendalam, lihat panduan ini:

  • Panduan Utama untuk Gambar Latar Belakang di Email
  • Panduan untuk GIF Animasi di Email
  • Menggunakan Gambar dalam Email HTML

Anda dapat dengan mudah mengikuti topik yang tercakup dalam panduan ini, jadi lanjutkan dan buka email di Litmus Builder dan kita akan mulai!

Siapkan gambar Anda

Sebelum Anda dapat menambahkan gambar ke email Anda, pastikan itu sudah diatur untuk sukses. Pertama, pastikan gambar yang Anda gunakan adalah jenis dan ukuran file yang baik untuk email . Ukuran file yang besar akan memperlambat waktu pemuatan Anda, mengurangi keseluruhan konversi dan keterlibatan Anda, jadi pastikan Anda menggunakan gambar ringan yang dimuat dengan cepat.

Masukkan gambar Anda

Temukan di mana Anda ingin menambahkan gambar dalam kode Anda—jika Anda menggunakan Litmus Builder, aktifkan Tampilan Kotak untuk mengeklik di mana Anda ingin gambar muncul, lalu klik ke tampilan kode. Ketika Anda telah menemukan tempat yang sempurna, gunakan tag <img> untuk menambahkan gambar Anda, tetapi ganti URL di sini dengan tautan langsung ke gambar Anda.

Jika Anda tidak yakin apa itu tautan langsung, lihat akhir nama file, itu harus diakhiri dengan jenis file gambar seperti ".png," ".jpg," atau ".gif." Tautan ke folder atau HTML tidak akan berfungsi di sini, tautan harus mengarah langsung ke gambar yang Anda tambahkan ke email Anda.

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

Itu dia! Setelah Anda menambahkan tag, gambar Anda akan ditampilkan di panel pratinjau jika Anda menggunakan Litmus Builder.

Ingin tahu di mana Anda dapat meng-host gambar Anda? Sebagian besar ESP memiliki sistem hosting file tempat Anda dapat mengunggah gambar dan menggunakan URL publik tersebut untuk sumber gambar di email Anda, jadi pastikan untuk memeriksa ESP Anda terlebih dahulu. Jika ESP Anda tidak menyediakan hosting file gambar, pertimbangkan untuk menggunakan AWS Amazon atau server FTP situs web Anda sendiri untuk hosting gambar.

Temukan dimensi yang tepat

Sebaiknya gunakan gambar yang berukuran dua kali lebih besar dari ruang yang ingin Anda sisipkan gambar sehingga terlihat bagus di semua monitor dan tidak ada pikselasi atau buram. Sesuaikan lebar dan tinggi gambar Anda dengan menambahkan pengubah ke tag <img> yang Anda buat di langkah sebelumnya. Ini akan terlihat seperti ini:

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

Sesuaikan nilai lebar dan tinggi tergantung pada apa pun yang masuk akal untuk email Anda. Anda dapat bermain dengan nilai-nilai ini dan melihat tampilannya dengan membuat perubahan, lalu mengklik panel pratinjau di Builder untuk melihatnya diperbarui.

Tambahkan teks ALT

Teks ALT menjelaskan gambar sehingga mereka yang menonaktifkan gambar di klien email mereka atau mengandalkan pembaca layar dapat dengan mudah membaca email Anda. Misalnya, jika kami memiliki gambar promosi yang menawarkan diskon 20%, menambahkan beberapa teks ALT yang menjelaskan penawaran membuat pembaca Anda mengetahui penawaran tersebut meskipun mereka tidak dapat melihat gambar karena alasan apa pun.

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

Teks ALT terbaik bersifat deskriptif, ringkas, dan memiliki maksud yang sama dengan gambar Anda. Jika Anda menjalankan email Anda melalui Daftar Periksa Litmus sebelum Anda mengirim, kami akan menandai teks ALT yang hilang sehingga Anda dapat dengan mudah masuk dan memperbaruinya. Sekarang Anda bahkan tidak perlu memeriksa dengan pengembang!

Tukar gambar

Berubah pikiran pada satu gambar itu? Anda punya dua opsi:

1. Sama seperti membuat gambar baru, Anda dapat mengganti URL yang mengarah ke gambar Anda dengan yang baru. Ini akan menyimpan semua dimensi Anda, teks ALT Anda, atau apa pun yang mungkin membantu menata gambar Anda dan hanya memperbarui konten gambar itu sendiri.

Ambil tag gambar saat ini dan cari jalur file:

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

Ganti jalur dengan jalur gambar baru Anda:

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

2. Tergantung di mana gambar Anda dihosting, Anda juga dapat mengunggah gambar baru dengan nama yang sama persis ke lokasi yang sama. Dengan begitu, Anda tidak perlu menyentuh kode sama sekali untuk memperbarui gambar email Anda.

Email sempurna gambar

Sekarang Anda memiliki kekuatan untuk memperbarui dan memodifikasi gambar, gunakan kekuatan itu dengan bijak! Gambar dalam email bisa salah dengan cepat. File berat yang membutuhkan waktu lama untuk dimuat, menggunakan gambar untuk seluruh email Anda, atau aksesibilitas di atas untuk desain dapat menciptakan pengalaman pelanggan yang berantakan.

Berikut beberapa praktik terbaik cepat yang perlu diingat saat Anda membuat perpustakaan gambar:

  • Jaga agar file tetap ringan dan manis , di bawah 1MB adalah yang terbaik dan semakin kecil semakin baik (Daftar Periksa Litmus memeriksa waktu muat Anda, jadi jangan khawatir jika Anda tidak mengetahui setiap ukuran gambar.)
  • Tambahkan teks alternatif untuk membuat email Anda terbaca dan dapat diakses meskipun gambar tidak terlihat.
  • Jangan mengirim email hanya gambar dan pastikan email Anda memiliki teks langsung. Mungkin tergoda untuk mendesain seluruh email menggunakan gambar, tetapi itu dapat merusak keterlibatan dan konversi dengan waktu muat yang lama dan pengalaman buruk bagi mereka yang menonaktifkan gambar.

Butuh bantuan untuk pertanyaan kode pemula tertentu? Beri tahu kami apa yang ingin Anda lihat selanjutnya dalam seri ini. Tidak ada pertanyaan yang terlalu mendasar!

_________________________________

Pelajari lebih lanjut tentang gambar di email:

  • Mengapa Anda Tidak Harus Mengirim Email Hanya Gambar
  • Panduan untuk GIF Animasi di Email  
  • Memahami Gambar Retina dalam Email HTML
  • PNG, GIF, atau JPEG? Manakah Format Gambar Terbaik untuk Email?  
  • GIF animasi di Email: 10 Tips untuk Menjaga Ukuran File Kecil  
  • Panduan Utama untuk Gambar Latar Belakang di Email
  • PNG Animasi di Email: Alternatif untuk GIF?