Penanganan Gambar di Klien Email

Banyak klien memblokir gambar secara bawaan sampai pengguna mengeklik "tampilkan gambar". Outlook, Gmail (untuk pengirim yang tidak dikenal), dan sebagian besar klien seluler pada koneksi berkuota akan menampilkan kotak penampung sebagai gantinya. Rancang surel dengan asumsi bahwa gambar mungkin tidak muncul.

Jangan pernah menanamkan teks penting (judul, label CTA, harga) ke dalam gambar. Gunakan teks HTML yang ditata dengan CSS sebaris agar pesan tetap tersampaikan saat gambar diblokir, pembaca layar dapat membacanya, dan pembalikan warna dalam mode gelap dapat menyesuaikannya dengan semestinya.

Setiap <img> memerlukan atribut alt yang deskriptif. Saat gambar diblokir, teks alt muncul di dalam kotak penampung — teks alt yang ditulis dengan baik mengisi kekosongan visual dengan pesan yang seharusnya disampaikan oleh gambar.

Tanpa dimensi eksplisit, kotak penampung akan menyusut dan tata letak bergeser saat gambar dimuat. Tetapkan kedua atribut tersebut (beserta gaya sebaris yang sesuai) agar sel menyediakan ruang, baik gambar akhirnya dimuat maupun tidak.

Outlook menyisipkan celah kecil di bawah gambar sebaris. Terapkan style="display:block" pada setiap <img> untuk menghilangkan celah tersebut dan memastikan ritme vertikal yang konsisten di semua klien.

Klien lama menambahkan batas biru di sekeliling <a><img></a>. Tetapkan border="0" pada atribut gambar dan style="border:0" secara sebaris agar gambar yang dibungkus tautan tampil rapi di dalam ajakan bertindak.

Klien surel tidak memiliki konsep tentang "halaman ini". src setiap gambar harus berupa URL absolut https:// yang mengarah ke CDN yang dapat diakses publik. Jalur lokal, jalur relatif, dan URL http:// (konten campuran) akan gagal dimuat tanpa pesan.

Gunakan host gambar yang cepat dan tersebar secara geografis. Beberapa klien mengambil gambar melalui proksi (Gmail) yang menambahkan lapisan cache mereka sendiri; CDN milik sendiri mencegah pemuatan langsung dari sumber asal yang lambat dan memastikan gambar dimuat secara konsisten di berbagai wilayah.

Untuk latar utama, padukan background-image CSS dengan bgcolor yang sesuai dengan nuansa dominan. Jika gambar diblokir, sel tetap menampilkan warna yang masuk akal, dan teks yang ditumpangkan di atas bgcolor tetap terbaca — sehingga mencegah bencana teks putih di atas blok putih.

Render gambar pada ukuran 2x lalu perkecil melalui atribut width agar tampak tajam pada layar ber-DPI tinggi: sumber berukuran 600x600 yang ditampilkan pada width="300" height="300" tampak tajam pada Retina. Konsekuensinya adalah penggunaan lebar pita, jadi pertahankan ukuran file tetap kecil dengan kompresi yang setara dengan WebP.

GIF animasi berfungsi di sebagian besar klien, kecuali Outlook (yang hanya menampilkan bingkai pertama). Rancang bingkai pertama agar tetap masuk akal sebagai gambar statis — judul, CTA, atau nilai utama harus terbaca meskipun bagian animasi lainnya tidak tampil.

Perlakukan gambar sebagai pelengkap, bukan pesan utama. Gunakan URL https absolut, tetapkan width/height/display:block/border:0, tulis teks alt yang bermakna, gunakan CDN yang cepat, padukan latar dengan cadangan bgcolor, rancang gambar pada ukuran 2x untuk Retina, dan ingat bahwa Outlook membekukan GIF pada bingkai pertama.