Cara Menampilkan Gambar di Email HTML

Cara Menampilkan Gambar di Email HTML
Cara Menampilkan Gambar di Email HTML
Mia Chevalier
Sabtu, 20 April 2024 19.33.16

Menyelesaikan Masalah Tampilan Gambar di Email Outlook

Mengalami masalah dengan gambar yang tidak ditampilkan dalam email HTML dapat membuat frustasi, terutama ketika gambar tersebut muncul dengan benar di server langsung. Masalah umum ini sering muncul di klien email seperti Outlook, yang mengharuskan gambar disematkan dan direferensikan dengan benar. Memastikan bahwa URL gambar Anda dapat diakses dan diformat dengan benar dalam kode HTML email Anda sangat penting untuk visibilitas.

Dalam kasus yang dijelaskan, masalah tetap ada meskipun gambar dihosting secara online dan dipanggil melalui URL-nya. Skenario ini menunjukkan potensi masalah dengan penanganan tautan gambar atau pengaturan keamanan Outlook, yang mungkin memblokir gambar agar tidak ditampilkan. Memahami nuansa ini penting untuk memecahkan masalah dan memperbaiki masalah tampilan.

Memerintah Keterangan
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Menentukan pengkodean karakter untuk dokumen HTML, penting untuk templat email guna memastikan karakter ditampilkan dengan benar di berbagai klien email.
curl_init() Menginisialisasi sesi baru dan mengembalikan pegangan cURL untuk digunakan dengan fungsi curl_setopt(), curl_exec(), dan curl_close() di PHP.
curl_setopt() Menetapkan opsi untuk sesi cURL. Perintah ini digunakan untuk menentukan URL yang akan diambil dan berbagai parameter lainnya seperti mengembalikan hasil sebagai string.
curl_exec() Jalankan sesi cURL, mengambil URL yang ditentukan dalam fungsi curl_setopt().
curl_getinfo() Mendapatkan informasi mengenai transfer tertentu, digunakan di sini untuk mengambil kode status HTTP dari URL yang diambil guna memverifikasi aksesibilitas.
curl_close() Menutup sesi CURL dan membebaskan semua sumber daya. Penting untuk menutup sesi setelah semua fungsi cURL untuk menghindari kebocoran memori.

Memahami Script HTML dan PHP untuk Tampilan Gambar Email

Skrip HTML yang disediakan dirancang khusus untuk menyematkan gambar dalam template email HTML. Skrip ini menggunakan tag untuk menyematkan gambar online, memastikan gambar tersebut dapat diakses saat email dilihat. Dimasukkannya dalam bagian ini penting karena mengatur jenis konten dan pengkodean karakter, yang membantu menampilkan konten email dengan benar di berbagai klien email.

Skrip PHP meningkatkan keandalan tampilan gambar dalam email dengan memverifikasi aksesibilitas URL gambar menggunakan beberapa perintah cURL. Perintah seperti ikal_init(), ikal_setopt(), Dan curl_exec() bekerja sama untuk menginisialisasi sesi cURL, mengatur opsi yang diperlukan untuk pengambilan URL, dan menjalankan sesi masing-masing. Fungsinya curl_getinfo() kemudian digunakan untuk mengambil kode status HTTP, yang mengonfirmasi apakah gambar dapat diakses atau tidak. Jika kode responnya 200 berarti gambar berhasil dijangkau melalui internet.

Memastikan Gambar Email HTML Ditampilkan di Outlook

Implementasi HTML dan CSS

<!-- HTML part of the email -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Email with Image</title>
<style>
  body, html, table {
    margin: 0px; padding: 0px; height: 100%; width: 100%;
    background-color: #5200FF;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td style="text-align: center;">
      <img src="https://d.img.vision/datafit/logoWhite.png" alt="Logo" style="max-height: 200px; max-width: 200px;">
    </td>
  </tr>
</table>
</body>
</html>

Memverifikasi dan Memperbaiki Aksesibilitas Gambar untuk Klien Email

Pembuatan Skrip Sisi Server dengan PHP

<?php
// Define the image URL
$imageUrl = 'https://d.img.vision/datafit/logoWhite.png';
// Use cURL to check if the image is accessible
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $imageUrl);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_exec($ch);
$responseCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
// Check if the image is accessible
if ($responseCode == 200) {
  echo 'Image is accessible and can be embedded in emails.';
} else {
  echo 'Image is not accessible, check the URL or permissions.';
}
curl_close($ch);
?>

Mengoptimalkan Kompatibilitas Email HTML di Seluruh Klien Email

Salah satu aspek penting yang sering diabaikan saat menyematkan gambar dalam email HTML adalah memastikan kompatibilitas lintas klien. Klien email seperti Outlook, Gmail, dan Apple Mail dapat menafsirkan kode HTML secara berbeda, sehingga menyebabkan perbedaan dalam cara email ditampilkan. Untuk mengoptimalkan email HTML untuk berbagai klien, penting untuk menggunakan CSS sebaris dan menghindari gaya CSS yang tidak didukung oleh semua klien email. Misalnya, beberapa klien tidak mendukung stylesheet eksternal atau bahkan internal, dan properti seperti 'max-width' sering diabaikan, terutama di versi Outlook yang lebih lama.

Selain itu, disarankan untuk menguji email di beberapa klien sebelum mengirimkannya. Alat seperti Litmus dan Email on Acid dapat memberikan pratinjau di berbagai perangkat dan klien email, memastikan bahwa semua elemen, termasuk gambar, ditampilkan dengan benar. Pendekatan proaktif ini membantu mengidentifikasi potensi masalah yang dapat memengaruhi tata letak email atau visibilitas gambar, sehingga memungkinkan penyesuaian sebelum pengiriman akhir.

Pertanyaan Umum tentang Menyematkan Gambar di Email HTML

  1. Pertanyaan: Mengapa gambar tidak ditampilkan di email Outlook?
  2. Menjawab: Outlook mungkin memblokir gambar dari sumber eksternal karena alasan keamanan atau mungkin tidak mendukung properti CSS tertentu yang digunakan dalam email.
  3. Pertanyaan: Bagaimana cara memastikan gambar saya ditampilkan di semua klien email?
  4. Menjawab: Gunakan CSS sebaris untuk penataan gaya, pertahankan dimensi gambar Anda tetap fleksibel, dan uji email Anda di berbagai klien sebelum dikirim.
  5. Pertanyaan: Berapa ukuran gambar yang disarankan dalam email HTML?
  6. Menjawab: Yang terbaik adalah menyimpan gambar email dengan lebar kurang dari 600 piksel untuk memastikan gambar tersebut sesuai dengan panel baca email pada umumnya.
  7. Pertanyaan: Bisakah saya menggunakan font web di email HTML saya?
  8. Menjawab: Ya, namun perlu diingat bahwa tidak semua klien email mendukung font web. Sediakan font cadangan untuk memastikan kompatibilitas.
  9. Pertanyaan: Apakah gambar perlu dihosting di server yang aman?
  10. Menjawab: Ya, menggunakan HTTPS untuk menghosting gambar membantu mencegah masalah terkait keamanan dan aksesibilitas di sebagian besar klien email.

Pemikiran Akhir tentang Mengoptimalkan Email HTML untuk Tampilan Gambar

Keberhasilan menyematkan gambar dalam email HTML memerlukan pemahaman tentang perilaku klien email, terutama dengan klien seperti Outlook. Memastikan bahwa gambar dapat diakses melalui HTTPS, menggunakan CSS sebaris untuk penataan gaya, dan terlebih dahulu menguji email dengan alat seperti Litmus atau Email on Acid dapat meningkatkan keandalan tampilan gambar secara signifikan. Pada akhirnya, pengujian menyeluruh dan kepatuhan terhadap praktik terbaik dalam desain email sangat penting untuk mencapai hasil yang konsisten di semua platform.