E-postmarketing en automatisearring

Hoe kinne jo ôfbyldings mei hege resolúsje brûke foar retina-displays yn jo HTML-e-post

Retina display is in marketing term brûkt troch Appel om in werjefte mei hege resolúsje te beskriuwen dy't in pikseltichtens hat heech genôch dat it minsklik each net by steat is om yndividuele piksels te ûnderskieden op in typyske sjochôfstân. In retina-display hat typysk in pikseltichtens fan 300 piksels per inch (ppi) of heger, wat signifikant heger is as in standert werjefte mei in pikseltichtens fan 72 ppi.

Retina-displays binne no heul mainstream foar byldskermen, laptops, mobile apparaten en tablets. In protte fabrikanten biede no byldskermen mei hege resolúsje mei pikseldichtheden dy't oerienkomme mei of boppe dy fan Apple's Retina-displays.

CSS Om in ôfbylding mei hegere resolúsje te werjaan foar in Retina-display

Jo kinne de folgjende CSS-koade brûke om in ôfbylding mei hege resolúsje te laden foar in Retina-display. Dizze koade detektearret de pikseldichtheid fan it apparaat en laadt de ôfbylding mei de @2x efterheaksel foar Retina byldskermen, wylst it laden fan de standert-resolúsje ôfbylding foar oare byldskermen.

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

In oare oanpak is te brûken vector graphics of SVG ôfbyldings, dy't nei elke resolúsje kinne skaalje sûnder kwaliteit te ferliezen. Hjir is in foarbyld:

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

Yn dit foarbyld is de SVG-koade direkt ynbêde yn 'e HTML-e-post mei de <svg> tag. De viewBox attribút definiearret de ôfmjittings fan de SVG ôfbylding, wylst de xmlns attribút spesifisearret de XML-nammeromte foar SVG.

De max-width eigendom is ynsteld op 'e div elemint om te soargjen dat de SVG-ôfbylding automatysk skalen om de beskikbere romte te passen, oant in maksimale breedte fan 300px yn dit gefal. Dit is in bêste praktyk om te garandearjen dat SVG-ôfbyldings goed wurde werjûn op alle apparaten en e-postkliïnten.

Noat: SVG-stipe kin ferskille ôfhinklik fan de e-postkliïnt, dus it is wichtich om jo e-post op meardere kliïnten te testen om te soargjen dat de SVG-ôfbylding goed werjûn wurdt.

In oare manier om HTML-e-post te kodearjen foar Retina-displays is te brûken srcset. Mei it srcset-attribút kinne jo ôfbyldings mei hege resolúsje leverje foar Retina-displays, wylst jo derfoar soargje dat de ôfbyldings goed binne foar apparaten mei legere resolúsje.

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

Yn dit foarbyld, de srcset attribút jout twa ôfbyldingsboarnen: image.jpg foar apparaten mei in resolúsje fan 600 piksels of minder, en image@2x.jpg foar apparaten mei in resolúsje fan 1200 piksels of mear. De 600w en 1200w beskriuwers spesifisearje de grutte fan 'e ôfbyldings yn piksels, wat helpt de browser te bepalen hokker ôfbylding te downloaden basearre op de resolúsje fan it apparaat.

Net alle e-postkliïnten stypje de srcset attribút. It nivo fan stipe foar srcset kin sterk ferskille ôfhinklik fan 'e e-postkliïnt, dus it is wichtich om jo e-mails op meardere kliïnten te testen om te soargjen dat de ôfbyldings goed wurde werjûn.

HTML foar ôfbyldings yn e-post optimalisearre foar retina-displays

it is mooglik om in responsive HTML-e-post te koade dy't in ôfbylding goed werjaan sil mei in resolúsje optimalisearre foar retina-displays. Hjir is hoe:

  1. Meitsje in ôfbylding mei hege resolúsje dy't dûbel is de grutte fan 'e eigentlike ôfbylding dy't jo wolle werjaan yn 'e e-post. As jo ​​​​bygelyks in 300 × 200-ôfbylding werjaan wolle, meitsje dan in 600 × 400-ôfbylding.
  2. Bewarje de hege-resolúsje ôfbylding mei de @2x efterheaksel. Bygelyks, as jo orizjinele ôfbylding is image.png, bewarje de ferzje mei hege resolúsje as image@2x.png.
  3. Brûk yn jo HTML-e-postkoade de folgjende koade om de ôfbylding wer te jaan:
<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)]> is in betingst kommentaar dat wurdt brûkt om te rjochtsjen op spesifike ferzjes fan Microsoft Outlook, dy't Microsoft Word brûkt om HTML-e-mails te werjaan. De HTML-renderingmotor fan Microsoft Word kin hiel oars wêze fan oare e-postkliïnten en webbrowsers, dus it fereasket faaks spesjale ôfhanneling. De

(gte mso 9) condition kontrolearret as de Microsoft Office-ferzje grutter is as of gelyk oan 9, wat oerienkomt mei Microsoft Office 2000. |(IE) condition kontrolearret as de kliïnt Internet Explorer is, dy't faak brûkt wurdt troch Microsoft Outlook.

HTML-e-post mei Retina Display optimisearre ôfbyldings

Hjir is in foarbyld fan in responsive HTML-e-postkoade dy't in ôfbylding werjaan mei in resolúsje optimalisearre foar retina-displays:

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

Hjir binne wat ekstra tips oer it optimalisearjen fan jo HTML-e-postberjochten foar ôfbyldings optimalisearre foar Retina-displays:

  • Soargje derfoar dat jo ôfbyldingstags altyd gebrûk meitsje alt tekst om kontekst te jaan foar de ôfbylding.
  • Optimalisearje ôfbyldings foar it web om de triemgrutte te ferminderjen sûnder de ôfbyldingskwaliteit te kompromittearjen. Dit kin it brûken omfetsje ôfbyldingskompresje ark, it ferminderjen fan it oantal kleuren brûkt yn 'e ôfbylding, en feroarje de grutte fan de ôfbylding nei syn optimale ôfmjittings foardat it uploaden nei de e-post.
  • Foarkom grutte eftergrûnôfbyldings dy't e-maillaadtiden kinne fertrage.
  • Animearre GIF's kinne grutter wêze yn bestângrutte dan statyske ôfbyldings fanwegen de meardere frames dy't nedich binne om de animaasje te meitsjen, wês wis dat se goed ûnder 1 hâlde Mb.

Douglas Karr

Douglas Karr is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

Werom nei topknop
Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.