Pengendalian Imej dalam Klien E-mel

Setiap <img> memerlukan atribut alt yang deskriptif. Apabila imej disekat, teks alt muncul dalam kotak ruang letak — teks alt yang ditulis dengan baik mengisi kekosongan visual dengan mesej yang sepatutnya disampaikan oleh imej tersebut.

Tanpa dimensi yang jelas, ruang letak akan mengecut dan reka letak akan berubah apabila imej dimuatkan. Tetapkan kedua-dua atribut (serta gaya sebaris yang sepadan) supaya sel menyediakan ruang sama ada imej akhirnya tiba atau tidak.

Outlook menyisipkan ruang kecil di bawah imej sebaris. Gunakan style="display:block" pada setiap <img> untuk menghapuskan ruang tersebut dan memastikan ritma menegak yang konsisten merentas semua klien.

Klien lama menambahkan sempadan biru di sekeliling <a><img></a>. Tetapkan border="0" pada atribut imej dan style="border:0" secara sebaris supaya imej yang dibalut dipaparkan dengan kemas dalam seruan tindakan.

Klien e-mel tidak mempunyai konsep "halaman ini". Setiap src imej mestilah URL https:// mutlak yang menunjuk kepada CDN yang boleh dicapai secara umum. Laluan setempat, laluan relatif dan URL http:// (kandungan bercampur) gagal dimuatkan secara senyap.

Gunakan hos imej yang pantas dan diedarkan secara geografi. Sesetengah klien mengambil imej melalui proksi (Gmail) yang menambahkan lapisan cache mereka sendiri; CDN pihak pertama mengelakkan pemuatan terus daripada sumber asal yang perlahan dan memastikan imej dimuatkan secara konsisten merentas wilayah.

Untuk latar belakang wira, gabungkan background-image CSS dengan bgcolor yang sepadan dengan ton dominan. Jika imej disekat, sel masih memaparkan warna yang munasabah dan teks yang dilapiskan pada bgcolor kekal mudah dibaca — sekali gus mengelakkan bencana teks putih pada blok putih.

Hasilkan imej pada skala 2x dan kecilkan melalui atribut width supaya kelihatan tajam pada paparan DPI tinggi: sumber 600x600 yang dipaparkan dengan width="300" height="300" kelihatan jelas pada Retina. Kosnya ialah lebar jalur, jadi pastikan saiz fail kecil dengan pemampatan setara WebP.

GIF beranimasi berfungsi dalam kebanyakan klien kecuali Outlook (yang hanya memaparkan bingkai pertama). Reka bentuk bingkai pertama supaya masuk akal sebagai imej statik — tajuk, CTA atau nilai utama mestilah boleh dibaca walaupun bahagian animasi yang lain tidak kelihatan.

Anggap imej sebagai peningkatan, bukan mesej utama. Gunakan URL https mutlak, tetapkan width/height/display:block/border:0, tulis teks alt yang bermakna, hoskan pada CDN yang pantas, gabungkan latar belakang dengan sandaran bgcolor, reka bentuk pada skala 2x untuk Retina, dan ingat bahawa Outlook membekukan GIF pada bingkai pertama.