Marketing prin e-mail și automatizare

Cum să utilizați imagini de înaltă rezoluție pentru afișajele Retina în e-mailul dvs. HTML

Display Retina este un termen de marketing folosit de Apple pentru a descrie un afișaj de înaltă rezoluție care are o densitate a pixelilor suficient de mare încât ochiul uman să nu poată distinge pixelii individuali la o distanță de vizualizare tipică. Un ecran retină are de obicei o densitate de pixeli de 300 de pixeli pe inch (ppi) sau mai mare, care este semnificativ mai mare decât un afișaj standard cu o densitate de pixeli de 72 ppi.

Ecranele Retina sunt acum destul de curente pentru afișaje, laptopuri, dispozitive mobile și tablete. Mulți producători oferă acum afișaje de înaltă rezoluție cu densități de pixeli care se potrivesc sau depășesc cele ale ecranelor Retina de la Apple.

CSS pentru a afișa o imagine cu rezoluție mai mare pentru un afișaj Retina

Puteți folosi următorul cod CSS pentru a încărca o imagine de înaltă rezoluție pentru un afișaj Retina. Acest cod detectează densitatea pixelilor dispozitivului și încarcă imaginea cu @ 2x sufix pentru afișajele Retina, în timp ce încărcați imaginea cu rezoluție standard pentru alte afișaje.

@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');
}

O altă abordare este utilizarea graficelor vectoriale sau SVG imagini, care se pot scala la orice rezoluție fără a pierde calitatea. Iată un exemplu:

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

În acest exemplu, codul SVG este încorporat direct în e-mailul HTML utilizând <svg> etichetă. viewBox atributul definește dimensiunile imaginii SVG, în timp ce xmlns atributul specifică spațiul de nume XML pentru SVG.

max-width proprietatea este stabilită pe div element pentru a se asigura că imaginea SVG se scalează automat pentru a se potrivi cu spațiul disponibil, până la o lățime maximă de 300px în acest caz. Aceasta este cea mai bună practică pentru a vă asigura că imaginile SVG sunt afișate corect pe toate dispozitivele și clienții de e-mail.

Notă: Suportul SVG poate varia în funcție de clientul de e-mail, așa că este important să vă testați e-mailul pe mai mulți clienți pentru a vă asigura că imaginea SVG este afișată corect.

Un alt mod de a codifica e-mailurile HTML pentru ecranele Retina este utilizarea srcset. Utilizarea atributului srcset vă permite să furnizați imagini de înaltă rezoluție pentru afișajele Retina, asigurându-vă în același timp că imaginile sunt dimensionate corect pentru dispozitivele cu rezoluție mai mică.

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

În acest exemplu, srcset Atributul oferă două surse de imagine: image.jpg pentru dispozitive cu o rezoluție de 600 de pixeli sau mai puțin și image@2x.jpg pentru dispozitive cu o rezoluție de 1200 pixeli sau mai mult. The 600w și 1200w descriptorii specifică dimensiunea imaginilor în pixeli, ceea ce ajută browserul să determine ce imagine să descarce în funcție de rezoluția dispozitivului.

Nu toți clienții de e-mail acceptă srcset atribut. Nivelul de sprijin pentru srcset poate varia mult în funcție de clientul de e-mail, așa că este important să vă testați e-mailurile pe mai mulți clienți pentru a vă asigura că imaginile sunt afișate corect.

HTML pentru imagini din e-mail optimizat pentru ecrane Retina

este posibil să codificați un e-mail HTML receptiv care va afișa corect o imagine la o rezoluție optimizată pentru afișajele retină. Iată cum:

  1. Creați o imagine de înaltă rezoluție care să fie dublu față de dimensiunea imaginii reale pe care doriți să o afișați în e-mail. De exemplu, dacă doriți să afișați o imagine de 300×200, creați o imagine de 600×400.
  2. Salvați imaginea de înaltă rezoluție cu @ 2x sufix. De exemplu, dacă imaginea dvs. originală este image.png, salvați versiunea de înaltă rezoluție ca imagine@2x.png.
  3. În codul de e-mail HTML, utilizați următorul cod pentru a afișa imaginea:
<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)]> este un comentariu condiționat care este utilizat pentru a viza anumite versiuni ale Microsoft Outlook, care utilizează Microsoft Word pentru a reda e-mailurile HTML. Motorul de randare HTML al Microsoft Word poate fi destul de diferit de alți clienți de e-mail și browsere web, așa că necesită adesea o manipulare specială. The

(gte mso 9) condiția verifică dacă versiunea Microsoft Office este mai mare sau egală cu 9, care corespunde cu Microsoft Office 2000. |(IE) starea verifică dacă clientul este Internet Explorer, care este adesea folosit de Microsoft Outlook.

E-mail HTML cu imagini optimizate pentru afișarea retinei

Iată un exemplu de cod de e-mail HTML receptiv care afișează o imagine la o rezoluție optimizată pentru afișajele retinei:

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

Retina Display Image Sfaturi

Iată câteva sfaturi suplimentare despre optimizarea e-mailurilor HTML pentru imagini optimizate pentru ecrane Retina:

  • Asigurați-vă că etichetele dvs. de imagine includ întotdeauna utilizarea alt text pentru a oferi context pentru imagine.
  • Optimizați imaginile pentru web pentru a reduce dimensiunea fișierului fără a compromite calitatea imaginii. Aceasta poate include utilizarea compresia imaginii instrumente, reducând numărul de culori utilizate în imagine și redimensionând imaginea la dimensiunile optime înainte de a o încărca pe e-mail.
  • Evitați imaginile de fundal mari care pot încetini timpul de încărcare a e-mailului.
  • GIF-urile animate pot avea dimensiunea fișierului mai mare decât imaginile statice datorită mai multor cadre necesare pentru a crea animația; asigurați-vă că le păstrați sub 1 Mb.

Douglas Karr

Douglas Karr este CMO al OpenINSIGHTS și fondatorul Martech Zone. Douglas a ajutat zeci de startup-uri de succes MarTech, a ajutat la due diligence de peste 5 miliarde de dolari în achiziții și investiții Martech și continuă să asiste companiile în implementarea și automatizarea strategiilor lor de vânzări și marketing. Douglas este un expert în transformare digitală recunoscut la nivel internațional și expert și vorbitor MarTech. Douglas este, de asemenea, un autor publicat al unui ghid pentru Dummie și al unei cărți de conducere în afaceri.

Articole pe aceeaşi temă

Înapoi la butonul de sus
Închide

Blocarea reclamelor a fost detectată

Martech Zone este în măsură să vă furnizeze acest conținut fără costuri, deoarece monetizăm site-ul nostru prin venituri din reclame, linkuri afiliate și sponsorizări. Am aprecia dacă ați elimina dispozitivul de blocare a reclamelor pe măsură ce vizualizați site-ul nostru.