Marketingu dhe Automatizimi me Email

Si të përdorni imazhe me rezolucion të lartë për shfaqjet e retinës në emailin tuaj HTML

Ekrani i retinës është një term marketingu i përdorur nga mollë për të përshkruar një ekran me rezolucion të lartë që ka një densitet piksel aq të lartë sa syri i njeriut nuk është në gjendje të dallojë pikselët individualë në një distancë tipike shikimi. Një ekran retinë zakonisht ka një densitet piksel prej 300 piksele për inç (IÇP) ose më e lartë, e cila është dukshëm më e lartë se një ekran standard me një densitet piksel prej 72 ppi.

Ekranet Retina tani janë mjaft të zakonshme për ekranet, laptopët, pajisjet celulare dhe tabletët. Shumë prodhues tani ofrojnë ekrane me rezolucion të lartë me dendësi pikselësh që përputhen ose tejkalojnë ato të ekraneve Retina të Apple.

CSS për të shfaqur një imazh me rezolucion më të lartë për një ekran retinë

Mund të përdorni kodin e mëposhtëm CSS për të ngarkuar një imazh me rezolucion të lartë për një ekran Retina. Ky kod zbulon densitetin e pikselit të pajisjes dhe ngarkon imazhin me @ 2x prapashtesë për ekranet Retina, ndërsa ngarkon imazhin me rezolucion standard për ekranet e tjera.

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

Një qasje tjetër është përdorimi i grafikës vektoriale ose SVG imazhe, të cilat mund të shkallëzohen në çdo rezolucion pa humbur cilësinë. Ja një shembull:

<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ë këtë shembull, kodi SVG është ngulitur direkt në emailin HTML duke përdorur <svg> etiketë E viewBox atributi përcakton dimensionet e imazhit SVG, ndërsa the xmlns atributi specifikon hapësirën e emrave XML për SVG.

La max-width prona është vendosur në div element për të siguruar që imazhi SVG të shkallëzohet automatikisht për t'iu përshtatur hapësirës së disponueshme, deri në një gjerësi maksimale prej 300 px në këtë rast. Kjo është një praktikë më e mirë për të siguruar që imazhet SVG të shfaqen siç duhet në të gjitha pajisjet dhe klientët e postës elektronike.

Shënim: Mbështetja SVG mund të ndryshojë në varësi të klientit të postës elektronike, prandaj është e rëndësishme të testoni emailin tuaj në klientë të shumtë për t'u siguruar që imazhi SVG të shfaqet siç duhet.

Një mënyrë tjetër e kodimit të emaileve HTML për ekranet Retina është përdorimi srcset. Përdorimi i atributit srcset ju lejon të ofroni imazhe me rezolucion të lartë për ekranet Retina duke siguruar që imazhet të kenë madhësinë e duhur për pajisjet me rezolucion më të ulët.

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

Në këtë shembull, srcset atributi ofron dy burime imazhi: image.jpg për pajisjet me rezolucion prej 600 piksele ose më pak, dhe image@2x.jpg për pajisjet me rezolucion prej 1200 piksele ose më shumë. Të 600w 1200w përshkruesit specifikojnë madhësinë e imazheve në pixel, gjë që ndihmon shfletuesin të përcaktojë se cilin imazh të shkarkojë bazuar në rezolucionin e pajisjes.

Jo të gjithë klientët e emailit e mbështesin srcset atribut. Niveli i mbështetjes për srcset mund të ndryshojnë shumë në varësi të klientit të postës elektronike, prandaj është e rëndësishme të testoni emailet tuaja në klientë të shumtë për t'u siguruar që imazhet shfaqen siç duhet.

HTML për imazhet në email të optimizuar për ekranet e retinës

është e mundur të kodoni një email të përgjegjshëm HTML që do të shfaqë siç duhet një imazh në një rezolucion të optimizuar për ekranet e retinës. Ja se si:

  1. Krijoni një imazh me rezolucion të lartë që është dyfishi i madhësisë së imazhit aktual që dëshironi të shfaqni në email. Për shembull, nëse dëshironi të shfaqni një imazh 300×200, krijoni një imazh 600×400.
  2. Ruani imazhin me rezolucion të lartë me @ 2x prapashtesë. Për shembull, nëse imazhi juaj origjinal është image.png, ruajeni versionin me rezolucion të lartë si image@2x.png.
  3. Në kodin tuaj të emailit HTML, përdorni kodin e mëposhtëm për të shfaqur imazhin:
<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)]> është një koment i kushtëzuar që përdoret për të synuar versione specifike të Microsoft Outlook, i cili përdor Microsoft Word për të dhënë emaile HTML. Motori i paraqitjes HTML i Microsoft Word mund të jetë mjaft i ndryshëm nga klientët e tjerë të postës elektronike dhe shfletuesit e internetit, kështu që shpesh kërkon trajtim të veçantë. Të

(gte mso 9) kushti kontrollon nëse versioni i Microsoft Office është më i madh ose i barabartë me 9, që korrespondon me Microsoft Office 2000. |(IE) gjendja kontrollon nëse klienti është Internet Explorer, i cili përdoret shpesh nga Microsoft Outlook.

Email HTML me imazhe të optimizuara të shfaqjes së retinës

Këtu është një shembull i një kodi të përgjegjshëm të emailit HTML që shfaq një imazh në një rezolucion të optimizuar për ekranet e retinës:

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

Këshilla për shfaqjen e imazhit të retinës

Këtu janë disa këshilla shtesë për optimizimin e emaileve tuaja HTML për imazhet e optimizuara për ekranet Retina:

  • Sigurohuni që gjithmonë të përfshini përdorimin e etiketave tuaja të imazhit alt tekst për të ofruar kontekst për imazhin.
  • Optimizoni imazhet për ueb për të zvogëluar madhësinë e skedarit pa kompromentuar cilësinë e imazhit. Kjo mund të përfshijë përdorimin kompresimi i imazhit mjetet, duke reduktuar numrin e ngjyrave të përdorura në imazh dhe duke ndryshuar madhësinë e imazhit në dimensionet e tij optimale përpara se ta ngarkoni atë në email.
  • Shmangni imazhet e mëdha të sfondit që mund të ngadalësojnë kohën e ngarkimit të emailit.
  • GIF-të e animuar mund të jenë më të mëdhenj në madhësinë e skedarit sesa imazhet statike për shkak të kornizave të shumta të nevojshme për të krijuar animacionin, sigurohuni që t'i mbani ato nën 1 Mb.

Douglas Karr

Douglas Karr është CMO i OpenINSIGHTS dhe themeluesi i Martech Zone. Douglas ka ndihmuar dhjetëra startup të suksesshëm të MarTech, ka ndihmuar në analizën e duhur prej mbi 5 miliardë dollarësh në blerjet dhe investimet e Martech dhe vazhdon të ndihmojë kompanitë në zbatimin dhe automatizimin e strategjive të tyre të shitjeve dhe marketingut. Douglas është një ekspert dhe folës i transformimit dixhital dhe i njohur ndërkombëtarisht në MarTech. Douglas është gjithashtu një autor i botuar i një udhëzuesi Dummie dhe një libri për udhëheqjen e biznesit.

Artikuj Të Ngjashëm

Kthehu në krye të faqes
afër

Blloku i reklamave u zbulua

Martech Zone është në gjendje t'ju ofrojë këtë përmbajtje pa kosto, sepse ne fitojmë para nga faqja jonë përmes të ardhurave nga reklamat, lidhjeve të filialeve dhe sponsorizimeve. Do të vlerësonim nëse do të hiqnit bllokuesin tuaj të reklamave ndërsa shikoni faqen tonë.