Email Marketing & Automation

Kumaha Nganggo Gambar Résolusi Luhur pikeun Rétina Pintonan Dina Email HTML Anjeun

tampilan rétina mangrupakeun istilah pamasaran dipaké ku apel pikeun ngajelaskeun tampilan resolusi luhur anu gaduh kapadetan piksel anu cukup luhur sahingga panon manusa henteu tiasa ngabédakeun piksel individu dina jarak tempoan anu biasa. Tampilan rétina biasana gaduh kapadetan piksel 300 piksel per inci (ppi) atawa saluhureuna, nu nyata leuwih luhur ti tampilan standar kalawan kapadetan piksel 72 ppi.

Pintonan rétina ayeuna rada mainstream pikeun tampilan, laptop, alat sélulér, sareng tablet. Seueur pabrik ayeuna nawiskeun pidangan resolusi luhur kalayan kapadetan piksel anu cocog atanapi langkung ageung tina tampilan Retina Apple.

CSS Pikeun Mintonkeun Gambar Resolusi Langkung Luhur Pikeun Tampilan Rétina

Anjeun tiasa nganggo kode CSS di handap pikeun ngamuat gambar resolusi luhur pikeun tampilan Rétina. Kode ieu ngadeteksi dénsitas piksel alat sareng ngamuat gambar nganggo @2x sufiks pikeun tampilan Rétina, bari ngamuat gambar resolusi standar pikeun tampilan séjén.

@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 sejen nyaeta ngagunakeun grafik vektor atawa SVG gambar, anu tiasa skala kana resolusi naon waé tanpa kaleungitan kualitas. Ieu conto:

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

Dina conto ieu, kodeu SVG dipasang langsung dina email HTML nganggo <svg> tag. The viewBox atribut ngahartikeun diménsi gambar SVG, sedengkeun xmlns atribut nangtukeun ngaranspasi XML pikeun SVG.

nu max-width harta diatur dina div elemen pikeun mastikeun yén skala gambar SVG otomatis pikeun nyocogkeun spasi sadia, nepi ka rubak maksimum 300px dina hal ieu. Ieu mangrupikeun prakték pangsaéna pikeun mastikeun yén gambar SVG ditampilkeun leres dina sadaya alat sareng klien email.

Catetan: Pangrojong SVG tiasa rupa-rupa gumantung kana klien email, janten penting pikeun nguji email anjeun dina sababaraha klien pikeun mastikeun yén gambar SVG ditampilkeun leres.

Cara séjén pikeun ngodekeun email HTML pikeun tampilan Rétina nyaéta ngagunakeun srcset. Ngagunakeun atribut srcset ngidinan Anjeun pikeun nyadiakeun gambar resolusi luhur pikeun tampilan Rétina bari mastikeun yén gambar nu bener ukuranana pikeun alat-resolusi handap.

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

Dina conto ieu, anu srcset atribut nyadiakeun dua sumber gambar: image.jpg pikeun alat kalawan resolusi 600 piksel atanapi kirang, jeung image@2x.jpg pikeun alat nu resolusina 1200 piksel atawa leuwih. The 600w jeung 1200w deskriptor nangtukeun ukuran gambar dina piksel, nu mantuan browser nangtukeun mana gambar pikeun ngundeur dumasar kana resolusi alat.

Henteu sadayana klien email ngadukung srcset atribut. Tingkat rojongan pikeun srcset bisa rupa-rupa lega gumantung kana klien surélék, jadi hal anu penting pikeun nguji surelek anjeun dina sababaraha klien pikeun mastikeun yén gambar dipintonkeun leres.

HTML Pikeun Gambar Dina Email Dioptimalkeun Pikeun Rétina Pintonan

kasebut nyaéta dimungkinkeun pikeun kode hiji email HTML responsif anu leres bakal nembongkeun hiji gambar dina resolusi dioptimalkeun pikeun tampilan rétina. Kieu carana:

  1. Jieun gambar resolusi luhur anu dua kali ukuran gambar sabenerna nu Anjeun hoyong tunjukkeun dina email. Contona, upami anjeun hoyong nampilkeun gambar 300 × 200, jieun gambar 600 × 400.
  2. Simpen gambar resolusi luhur nganggo @2x sufiks. Contona, upami gambar aslina anjeun image.png, simpen versi resolusi luhur salaku gambar@2x.png.
  3. Dina kode email HTML anjeun, paké kodeu ieu pikeun mintonkeun 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)]> mangrupa koméntar kondisional anu dipaké pikeun nargétkeun vérsi husus tina Microsoft Outlook, anu ngagunakeun Microsoft Word pikeun nyieun email HTML. Mesin rendering HTML Microsoft Word tiasa rada béda ti klien email sareng panyungsi wéb sanés, janten sering peryogi penanganan khusus. The

(gte mso 9) kaayaan mariksa lamun versi Microsoft Office leuwih gede atawa sarua jeung 9, nu pakait jeung Microsoft Office 2000. |(IE) kaayaan mariksa lamun klien nyaeta Internet Explorer, nu mindeng dipaké ku Microsoft Outlook.

Email HTML Sareng Gambar Dioptimalkeun Tampilan Rétina

Ieu conto kode email HTML responsif anu nampilkeun gambar dina resolusi anu dioptimalkeun pikeun tampilan rétina:

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

Rétina Témbongkeun Gambar Tips

Ieu sababaraha tip tambahan pikeun ngaoptimalkeun Email HTML anjeun pikeun gambar anu dioptimalkeun pikeun tampilan Rétina:

  • Pastikeun pikeun salawasna mibanda tag gambar anjeun kaasup ngagunakeun alt téks pikeun nyadiakeun konteks pikeun gambar.
  • Optimalkeun gambar pikeun wéb pikeun ngirangan ukuran file tanpa kompromi kualitas gambar. Ieu bisa ngawengku ngagunakeun komprési gambar alat-alat, ngurangan jumlah kelir dipaké dina gambar, sarta ngarobah ukuran gambar ka dimensi optimal na saméméh unggah ka surelek.
  • Hindarkeun gambar latar anu ageung anu tiasa ngalambatkeun waktos beban email.
  • GIF animasi tiasa langkung ageung dina ukuran file tibatan gambar statik kusabab seueur pigura anu diperyogikeun pikeun nyiptakeun animasi, pastikeun tetep dina kaayaan 1. Mb.

Douglas Karr

Douglas Karr nyaeta CMO tina OpenINSIGHTS jeung pangadeg nu Martech Zone. Douglas geus mantuan puluhan startups MarTech suksés, geus mantuan dina karajinan alatan leuwih $ 5 bil dina akuisisi jeung Investasi Martech, sarta terus mantuan pausahaan dina ngalaksanakeun jeung ngajadikeun otomatis jualan na strategi marketing maranéhanana. Douglas mangrupikeun transformasi digital anu diakui sacara internasional sareng ahli MarTech sareng spiker. Douglas ogé panulis anu diterbitkeun tina pituduh Dummie sareng buku kapamimpinan bisnis.

Artikel nu patali

Deui tombol luhur
deukeut

Adblock Dideteksi

Martech Zone tiasa masihan anjeun eusi ieu tanpa biaya sabab kami ngamonetisasi situs kami ngalangkungan pendapatan iklan, tautan afiliasi, sareng sponsor. Kami bakal ngahargaan upami anjeun ngahapus pameungpeuk iklan anjeun nalika anjeun ningali situs kami.