Pemasaran E-mel & Automasi

Cara Menggunakan Imej Resolusi Tinggi untuk Paparan Retina Dalam E-mel HTML Anda

Paparan retina ialah istilah pemasaran yang digunakan oleh Apple untuk menerangkan paparan resolusi tinggi yang mempunyai ketumpatan piksel yang cukup tinggi sehingga mata manusia tidak dapat membezakan piksel individu pada jarak tontonan biasa. Paparan retina biasanya mempunyai ketumpatan piksel 300 piksel per inci (ppi) atau lebih tinggi, yang jauh lebih tinggi daripada paparan standard dengan ketumpatan piksel 72 ppi.

Paparan retina kini agak arus perdana untuk paparan, komputer riba, peranti mudah alih dan tablet. Banyak pengeluar kini menawarkan paparan resolusi tinggi dengan ketumpatan piksel yang sepadan atau melebihi paparan Retina Apple.

CSS Untuk Memaparkan Imej Resolusi Lebih Tinggi Untuk Paparan Retina

Anda boleh menggunakan kod CSS berikut untuk memuatkan imej resolusi tinggi untuk paparan Retina. Kod ini mengesan ketumpatan piksel peranti dan memuatkan imej dengan @ 2x akhiran untuk paparan Retina, sambil memuatkan imej resolusi standard untuk paparan lain.

@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 ialah menggunakan grafik vektor atau SVG imej, yang boleh berskala kepada sebarang resolusi tanpa kehilangan kualiti. Berikut ialah contoh:

<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, kod SVG dibenamkan terus dalam e-mel HTML menggunakan <svg> teg. The viewBox atribut mentakrifkan dimensi imej SVG, manakala xmlns atribut menentukan ruang nama XML untuk SVG.

. max-width harta ditetapkan pada div elemen untuk memastikan imej SVG berskala secara automatik agar sesuai dengan ruang yang tersedia, sehingga lebar maksimum 300px dalam kes ini. Ini adalah amalan terbaik untuk memastikan imej SVG dipaparkan dengan betul pada semua peranti dan klien e-mel.

Catatan: Sokongan SVG boleh berbeza-beza bergantung pada klien e-mel, jadi adalah penting untuk menguji e-mel anda pada berbilang pelanggan untuk memastikan imej SVG dipaparkan dengan betul.

Satu lagi cara pengekodan e-mel HTML untuk paparan Retina ialah menggunakan srcset. Menggunakan atribut srcset membolehkan anda menyediakan imej resolusi tinggi untuk paparan Retina sambil memastikan bahawa imej bersaiz betul untuk peranti resolusi 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, srcset atribut menyediakan dua sumber imej: image.jpg untuk peranti dengan resolusi 600 piksel atau kurang, dan image@2x.jpg untuk peranti dengan resolusi 1200 piksel atau lebih. The 600w and 1200w deskriptor menentukan saiz imej dalam piksel, yang membantu penyemak imbas menentukan imej yang hendak dimuat turun berdasarkan peleraian peranti.

Tidak semua pelanggan e-mel menyokong srcset atribut. Tahap sokongan untuk srcset boleh berbeza-beza bergantung pada klien e-mel, jadi adalah penting untuk menguji e-mel anda pada berbilang pelanggan untuk memastikan imej dipaparkan dengan betul.

HTML Untuk Imej Dalam E-mel Dioptimumkan Untuk Paparan Retina

adalah mungkin untuk mengodkan e-mel HTML responsif yang akan memaparkan imej dengan betul pada resolusi yang dioptimumkan untuk paparan retina. Ini caranya:

  1. Cipta imej resolusi tinggi yang bersaiz dua kali ganda daripada imej sebenar yang anda mahu paparkan dalam e-mel. Contohnya, jika anda ingin memaparkan imej 300×200, buat imej 600×400.
  2. Simpan imej resolusi tinggi dengan @ 2x akhiran. Contohnya, jika imej asal anda ialah image.png, simpan versi resolusi tinggi sebagai image@2x.png.
  3. Dalam kod e-mel HTML anda, gunakan kod berikut untuk memaparkan imej:
<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)]> ialah ulasan bersyarat yang digunakan untuk menyasarkan versi Microsoft Outlook tertentu, yang menggunakan Microsoft Word untuk memaparkan e-mel HTML. Enjin pemaparan HTML Microsoft Word mungkin agak berbeza daripada klien e-mel dan pelayar web lain, jadi ia selalunya memerlukan pengendalian khas. The

(gte mso 9) syarat menyemak sama ada versi Microsoft Office lebih besar daripada atau sama dengan 9, yang sepadan dengan Microsoft Office 2000. |(IE) keadaan menyemak sama ada klien adalah Internet Explorer, yang sering digunakan oleh Microsoft Outlook.

E-mel HTML Dengan Imej Dioptimumkan Paparan Retina

Berikut ialah contoh kod e-mel HTML responsif yang memaparkan imej pada resolusi yang dioptimumkan untuk paparan 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>

Petua Imej Paparan Retina

Berikut ialah beberapa petua tambahan untuk mengoptimumkan E-mel HTML anda untuk imej yang dioptimumkan untuk paparan Retina:

  • Pastikan anda sentiasa mempunyai teg imej anda termasuk penggunaan alt teks untuk menyediakan konteks untuk imej.
  • Optimumkan imej untuk web untuk mengurangkan saiz fail tanpa menjejaskan kualiti imej. Ini boleh termasuk menggunakan pemampatan imej alat, mengurangkan bilangan warna yang digunakan dalam imej, dan mengubah saiz imej kepada dimensi optimumnya sebelum memuat naiknya ke e-mel.
  • Elakkan imej latar belakang yang besar yang boleh melambatkan masa pemuatan e-mel.
  • GIF animasi boleh menjadi lebih besar dalam saiz fail daripada imej statik kerana berbilang bingkai yang diperlukan untuk mencipta animasi, pastikan anda menyimpannya dengan baik di bawah 1 Mb.

Douglas Karr

Douglas Karr ialah CMO daripada OpenINSIGHTS dan pengasas Martech Zone. Douglas telah membantu berpuluh-puluh syarikat permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus membantu syarikat dalam melaksanakan dan mengautomasikan strategi jualan dan pemasaran mereka. Douglas ialah transformasi digital yang diiktiraf di peringkat antarabangsa dan pakar serta penceramah MarTech. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

Kembali ke atas butang
Tutup

Adblock Dikesan

Martech Zone mampu memberikan anda kandungan ini tanpa sebarang kos kerana kami mengewangkan tapak kami melalui hasil iklan, pautan ahli gabungan dan tajaan. Kami amat menghargai jika anda akan mengalih keluar penyekat iklan anda semasa anda melihat tapak kami.