Email Marketing & Otomasi

Cara Nggunakake Gambar Resolusi Dhuwur kanggo Retina Tampilan Ing Email HTML Panjenengan

Tampilan retina minangka istilah marketing sing digunakake dening Apple kanggo njlèntrèhaké tampilan resolusi dhuwur sing kapadhetan piksel cukup dhuwur sing mripat manungsa ora bisa mbedakake piksel individu ing kadohan tampilan khas. Tampilan retina biasane duwe kapadhetan piksel 300 piksel per inci (ppi) utawa luwih dhuwur, sing luwih dhuwur tinimbang tampilan standar kanthi kapadhetan piksel 72 ppi.

Tampilan retina saiki cukup umum kanggo tampilan, laptop, piranti seluler, lan tablet. Akeh manufaktur saiki nawakake tampilan resolusi dhuwur kanthi kapadhetan piksel sing cocog utawa ngluwihi tampilan Retina Apple.

CSS Kanggo Nampilake Gambar Resolusi Luwih Kanggo Tampilan Retina

Sampeyan bisa nggunakake kode CSS ing ngisor iki kanggo mbukak gambar resolusi dhuwur kanggo tampilan Retina. Kode iki ndeteksi Kapadhetan piksel piranti lan mbukak gambar karo @ 2x suffix kanggo tampilan Retina, nalika ngemot gambar resolusi standar kanggo tampilan liyane.

@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 liyane yaiku nggunakake grafis vektor utawa SVG gambar, kang bisa ukuran kanggo sembarang résolusi tanpa kelangan kualitas. Iki contone:

<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>

Ing conto iki, kode SVG ditempelake langsung ing email HTML nggunakake <svg> tag Ing viewBox atribut nemtokake ukuran gambar SVG, nalika xmlns atribut nemtokake ruang jeneng XML kanggo SVG.

The max-width property disetel ing div unsur kanggo mesthekake yen gambar SVG ukuran otomatis pas karo papan sing kasedhiya, nganti jembaré maksimum 300px ing kasus iki. Iki minangka praktik paling apik kanggo mesthekake yen gambar SVG ditampilake kanthi bener ing kabeh piranti lan klien email.

Catetan: Dhukungan SVG bisa beda-beda gumantung saka klien email, dadi penting kanggo nyoba email sampeyan ing pirang-pirang klien kanggo mesthekake yen gambar SVG ditampilake kanthi bener.

Cara liya kanggo ngode email HTML kanggo tampilan Retina yaiku nggunakake srcset. Nggunakake atribut srcset ngidini sampeyan nyedhiyakake gambar kanthi resolusi dhuwur kanggo tampilan Retina nalika mesthekake yen gambar kasebut ukurane bener kanggo piranti kanthi resolusi sing luwih murah.

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

Ing conto iki, ing srcset atribut nyedhiyakake rong sumber gambar: image.jpg kanggo piranti kanthi resolusi 600 piksel utawa kurang, lan image@2x.jpg kanggo piranti kanthi resolusi 1200 piksel utawa luwih. Ing 600w lan 1200w deskriptor nemtokake ukuran gambar ing piksel, sing mbantu browser nemtokake gambar sing arep diundhuh adhedhasar resolusi piranti.

Ora kabeh klien email ndhukung srcset atribut. Tingkat dhukungan kanggo srcset bisa beda-beda gumantung saka klien email, dadi penting kanggo nyoba email sampeyan ing macem-macem klien kanggo mesthekake yen gambar ditampilake kanthi bener.

HTML Kanggo Gambar Ing Email Optimized Kanggo Retina Tampilan

iku bisa kanggo kode email HTML responsif sing bakal bener nampilake gambar ing resolusi optimized kanggo retina tampilan. Mangkene carane:

  1. Nggawe gambar resolusi dhuwur sing ukurane tikel kaping pindho saka gambar nyata sing pengin ditampilake ing email. Contone, yen sampeyan pengin nampilake gambar 300 × 200, nggawe gambar 600 × 400.
  2. Simpen gambar resolusi dhuwur nganggo @ 2x sufiks. Contone, yen gambar asli sampeyan image.png, simpen versi resolusi dhuwur minangka gambar@2x.png.
  3. Ing kode email HTML sampeyan, gunakake kode ing ngisor iki kanggo nampilake 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)]> minangka komentar kondisional sing digunakake kanggo target versi tartamtu saka Microsoft Outlook, sing nggunakake Microsoft Word kanggo nerjemahake email HTML. Mesin rendering HTML Microsoft Word bisa beda banget karo klien email lan browser web liyane, mula asring mbutuhake penanganan khusus. Ing

(gte mso 9) Kondisi mriksa yen versi Microsoft Office luwih gedhe utawa padha karo 9, sing cocog karo Microsoft Office 2000. |(IE) kahanan mriksa yen klien iku Internet Explorer, kang asring digunakake dening Microsoft Outlook.

Email HTML Kanthi Gambar Optimized Tampilan Retina

Iki conto kode email HTML responsif sing nampilake gambar kanthi resolusi sing dioptimalake kanggo 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>

Tip Gambar Tampilan retina

Mangkene sawetara tips tambahan babagan ngoptimalake Email HTML kanggo gambar sing dioptimalake kanggo tampilan Retina:

  • Priksa manawa sampeyan tansah duwe tag gambar sing kalebu nggunakake alt teks kanggo nyedhiyani konteks kanggo gambar.
  • Ngoptimalake gambar kanggo web kanggo nyuda ukuran file tanpa kompromi kualitas gambar. Iki bisa kalebu nggunakake komprèsi gambar alat, ngurangi jumlah werna sing digunakake ing gambar, lan ngowahi ukuran gambar menyang dimensi optimal sadurunge ngunggah menyang email.
  • Ngindhari gambar latar mburi gedhe sing bisa nyuda wektu mbukak email.
  • GIF animasi bisa luwih gedhe ing ukuran file tinimbang gambar statis amarga akeh pigura sing dibutuhake kanggo nggawe animasi, mesthine tetep ora kurang saka 1. Mb.

Douglas Karr

Douglas Karr punika CMO saka OpenINSIGHTS lan pangadeg ing Martech Zone. Douglas wis mbantu Welasan wiwitan MarTech sukses, wis mbantu ing amarga rajin liwat $ 5 bil ing pitukon lan investasi Martech, lan terus kanggo ngewangi perusahaan ing ngleksanakake lan ngotomatisasi dodolan lan strategi marketing. Douglas minangka transformasi digital sing diakoni sacara internasional lan pakar lan speaker MarTech. Douglas uga dadi penulis buku pandhuan Dummie lan buku kepemimpinan bisnis.

Artikel web

Bali menyang ndhuwur tombol
Cedhak

Adblock Dideteksi

Martech Zone bisa nyedhiyakake konten iki tanpa biaya amarga kita monetisasi situs liwat revenue iklan, pranala afiliasi, lan sponsor. Kita bakal ngormati yen sampeyan bakal mbusak blocker iklan nalika ndeleng situs kita.