Pemasaran & Otomasi Email

Cara Menggunakan Gambar Resolusi Tinggi untuk Tampilan Retina di Email HTML Anda

Tampilan retina adalah istilah pemasaran yang digunakan oleh Apple untuk menggambarkan tampilan beresolusi tinggi yang memiliki kerapatan piksel cukup tinggi sehingga mata manusia tidak dapat membedakan setiap piksel pada jarak pandang biasa. Tampilan retina biasanya memiliki kerapatan piksel 300 piksel per inci (ppi) atau lebih tinggi, yang jauh lebih tinggi daripada layar standar dengan kerapatan piksel 72 ppi.

Layar retina sekarang cukup umum untuk layar, laptop, perangkat seluler, dan tablet. Banyak pabrikan kini menawarkan layar beresolusi tinggi dengan kerapatan piksel yang cocok atau melebihi layar Retina Apple.

CSS Untuk Menampilkan Gambar Beresolusi Lebih Tinggi Untuk Layar Retina

Anda dapat menggunakan kode CSS berikut untuk memuat gambar beresolusi tinggi untuk tampilan Retina. Kode ini mendeteksi kerapatan piksel perangkat dan memuat gambar dengan @ 2x akhiran untuk tampilan Retina, sambil memuat gambar resolusi standar untuk tampilan lainnya.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

Pendekatan lain adalah dengan menggunakan grafik vektor atau SVG gambar, yang dapat diskalakan ke resolusi apa pun tanpa kehilangan kualitas. Berikut contohnya:

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

Dalam contoh ini, kode SVG disematkan langsung di email HTML menggunakan <svg> menandai. Itu viewBox atribut mendefinisikan dimensi gambar SVG, sedangkan xmlns atribut menentukan namespace XML untuk SVG.

Grafik max-width properti diatur pada div elemen untuk memastikan bahwa gambar SVG diskalakan secara otomatis agar sesuai dengan ruang yang tersedia, hingga lebar maksimum 300 piksel dalam kasus ini. Ini adalah praktik terbaik untuk memastikan gambar SVG ditampilkan dengan benar di semua perangkat dan klien email.

Catatan: Dukungan SVG dapat bervariasi tergantung pada klien email, jadi penting untuk menguji email Anda pada banyak klien untuk memastikan bahwa gambar SVG ditampilkan dengan benar.

Cara lain pengkodean email HTML untuk tampilan Retina adalah dengan memanfaatkan srcset. Menggunakan atribut srcset memungkinkan Anda memberikan gambar beresolusi tinggi untuk layar Retina sekaligus memastikan ukuran gambar sesuai untuk perangkat beresolusi rendah.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

Dalam contoh ini, the srcset atribut menyediakan dua sumber gambar: image.jpg untuk perangkat dengan resolusi 600 piksel atau kurang, dan image@2x.jpg untuk perangkat dengan resolusi 1200 piksel atau lebih. Itu 600w dan 1200w deskriptor menentukan ukuran gambar dalam piksel, yang membantu browser menentukan gambar mana yang akan diunduh berdasarkan resolusi perangkat.

Tidak semua klien email mendukung srcset atribut. Tingkat dukungan untuk srcset dapat sangat bervariasi tergantung pada klien email, jadi penting untuk menguji email Anda pada banyak klien untuk memastikan bahwa gambar ditampilkan dengan benar.

HTML Untuk Gambar Dalam Email Dioptimalkan Untuk Tampilan Retina

dimungkinkan untuk membuat kode email HTML responsif yang akan menampilkan gambar dengan benar pada resolusi yang dioptimalkan untuk tampilan retina. Begini caranya:

  1. Buat gambar beresolusi tinggi dengan ukuran dua kali lipat dari gambar sebenarnya yang ingin Anda tampilkan di email. Misalnya, jika ingin menampilkan gambar berukuran 300x200, buatlah gambar berukuran 600x400.
  2. Simpan gambar beresolusi tinggi dengan @ 2x akhiran. Misalnya, jika gambar asli Anda adalah image.png, simpan versi resolusi tinggi sebagai gambar@2x.png.
  3. Dalam kode email HTML Anda, gunakan kode berikut untuk menampilkan gambar:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> adalah komentar bersyarat yang digunakan untuk menargetkan versi Microsoft Outlook tertentu, yang menggunakan Microsoft Word untuk merender email HTML. Mesin rendering HTML Microsoft Word bisa sangat berbeda dari klien email dan browser web lainnya, sehingga seringkali memerlukan penanganan khusus. Itu

(gte mso 9) kondisi memeriksa apakah versi Microsoft Office lebih besar dari atau sama dengan 9, yang sesuai dengan Microsoft Office 2000. The |(IE) kondisi memeriksa apakah klien adalah Internet Explorer, yang sering digunakan oleh Microsoft Outlook.

Email HTML Dengan Tampilan Retina Gambar yang Dioptimalkan

Berikut adalah contoh kode email HTML responsif yang menampilkan gambar dengan resolusi yang dioptimalkan untuk tampilan retina:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

Kiat Gambar Tampilan Retina

Berikut ini beberapa kiat tambahan untuk mengoptimalkan Email HTML Anda untuk gambar yang dioptimalkan untuk tampilan Retina:

  • Pastikan untuk selalu memasukkan tag gambar Anda menggunakan alt teks untuk menyediakan konteks untuk gambar.
  • Optimalkan gambar untuk web untuk mengurangi ukuran file tanpa mengorbankan kualitas gambar. Ini bisa termasuk menggunakan kompresi gambar alat, mengurangi jumlah warna yang digunakan pada gambar, dan mengubah ukuran gambar ke dimensi optimalnya sebelum mengunggahnya ke email.
  • Hindari gambar latar besar yang dapat memperlambat waktu muat email.
  • GIF animasi bisa lebih besar dalam ukuran file daripada gambar statis karena beberapa bingkai diperlukan untuk membuat animasi, pastikan untuk menyimpannya di bawah 1 Mb.

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.