Email Maketi & Otometi

Fa'afefea ona Fa'aoga Ata Maualuluga mo Fa'aaliga Retina I lau Imeli HTML

Retina fa'aaliga o se fa'atauga fa'atauga fa'aaoga e apu e fa'amatala ai se fa'aaliga maualuga e maua ai le maualuga o le pika e le mafai ai e le mata o le tagata ona iloa le eseesega o pika ta'ito'atasi i se mamao e va'ai ai. O le fa'aaliga o le retina e masani lava ona i ai le pixel density o le 300 pixels i le inisi (ppi) poʻo le maualuga, lea e sili atu le maualuga nai lo se faʻaaliga masani ma le pika pika o le 72 ppi.

O fa'aaliga o le retina ua fa'aigoa nei mo fa'aaliga, komepiuta feavea'i, masini feavea'i, ma papa. O le tele o tagata gaosi oloa o loʻo ofoina atu nei faʻaaliga maualuga faʻatasi ma pixel densities e fetaui pe sili atu i faʻaaliga a Apple's Retina.

CSS e fa'aalia ai se ata maualuga maualuga mo se fa'aaliga Retina

E mafai ona e fa'aogaina le CSS code nei e uta ai se ata maualuga mo se fa'aaliga Retina. O lenei code e iloa ai le pixel density o le masini ma utaina le ata i le @ 2x suffix mo fa'aaliga Retina, a'o utaina le ata fa'ata'atia mo isi fa'aaliga.

@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 le isi auala o le faʻaaogaina o ata vector poʻo SVG ata, e mafai ona fua i so'o se iugafono e aunoa ma le leiloa o le lelei. O se fa'ata'ita'iga lenei:

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

I lenei faʻataʻitaʻiga, o le SVG code o loʻo faʻapipiʻi saʻo i le imeli HTML e faʻaaoga ai le <svg> pine O le viewBox uiga fa'amatalaina le tele o le ata SVG, a'o le xmlns uiga fa'amaonia le XML namespace mo SVG.

le max-width fanua ua seti i luga o le div elemene e faʻamautinoa ai o le ata SVG e otometi lava ona fetaui ma le avanoa avanoa, e oʻo atu i le lautele maualuga o le 300px i lenei tulaga. Ole fa'ata'ita'iga sili lea mo le fa'amautinoaina ole fa'aalia lelei o ata SVG ile masini uma ma tagata fa'atau imeli.

Manatua: O le lagolago a le SVG e mafai ona fesuisuiaʻi e faʻatatau ile imeli meli, o lea e taua ai le suʻeina o lau imeli i luga o le tele o tagata faʻatau ina ia mautinoa o loʻo faʻaalia lelei le ata SVG.

O le isi auala e fa'ailoga ai imeli HTML mo fa'aaliga Retina o le fa'aoga srcset. O le fa'aogaina o le uiga o le srcset e mafai ai ona e tu'uina atu ata maualuluga mo fa'aaliga Retina a'o fa'amautinoaina o lo'o fa'atulaga lelei ia ata mo masini la'ititi.

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

I lenei faataitaiga, o le srcset O le uiga e maua ai ata e lua: image.jpg mo masini ma se iugafono o 600 pixels pe itiiti, ma image@2x.jpg mo masini ma se iugafono o le 1200 pixels pe sili atu. O le 600w ma 1200w fa'amatala fa'amatala le tele o ata i pixels, lea e fesoasoani i le su'esu'ega e fuafua po'o fea ata e la'u mai e fa'atatau i le iugafono a le masini.

E le o tagata imeli uma e lagolagoina le srcset uiga. Le maualuga o le lagolago mo srcset e mafai ona fesuia'i lautele fa'alagolago i le tagata fa'atau imeli, o lea e taua ai le su'eina o au imeli i le tele o tagata fa'atau ina ia mautinoa o lo'o fa'aalia lelei ata.

HTML Mo Ata I Imeli Fa'atonuina Mo Fa'aaliga Retina

e mafai ona fa'ailoga se imeli HTML tali mai o le a fa'aalia lelei se ata i se fa'ai'uga ua fa'atatau mo fa'aaliga retina. O le auala lenei:

  1. Fausia se ata maualuga maualuga e faʻaluaina le tele o le ata moni e te manaʻo e faʻaalia i le imeli. Mo se faʻataʻitaʻiga, afai e te manaʻo e faʻaalia se ata 300 × 200, fai se ata 600 × 400.
  2. Faasaoina le ata maualuga i le @ 2x suffix. Mo se faʻataʻitaʻiga, afai o lau ata muamua image.png, fa'asaoina le fa'aaliga maualuga maualuga e pei o ata@2x.png.
  3. I lau HTML code imeli, faʻaoga le code lea e faʻaalia ai le ata:
<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)]> ose fa'amatalaga tu'utu'uga e fa'aoga e fa'atatau i fa'amatalaga fa'apitoa o Microsoft Outlook, lea e fa'aogaina ai le Microsoft Word e tu'uina atu ai imeli HTML. Ole Microsoft Word's HTML rendering engine e mafai ona matua ese lava mai isi fa'atau imeli ma su'esu'ega i luga ole laiga, o lea e masani ona mana'omia ai le taulimaina fa'apitoa. O le

(gte mso 9) siaki tulaga pe o le Microsoft Office version e sili atu pe tutusa ma le 9, lea e fetaui ma le Microsoft Office 2000. |(IE) siaki tulaga pe afai o le kalani o Internet Explorer, lea e masani ona faʻaogaina e Microsoft Outlook.

HTML Email ma le Retina Fa'aaliga Ata Fa'alelei

O se fa'ata'ita'iga lea o se fa'ailoga imeli HTML e fa'aalia ai se ata i se fa'ai'uga ua fa'atatauina mo fa'aaliga mata:

<!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 Fa'aali Ata Fautuaga

O nisi nei o fa'amatalaga fa'aopoopo i le fa'asilisiliina o au Imeli HTML mo ata fa'apitoa mo fa'aaliga Retina:

  • Ia mautinoa ia i ai i taimi uma au pine ata e aofia ai le faʻaaogaina alt tusitusiga e maua ai le tala mo le ata.
  • Fa'alelei ata mo le upegatafa'ilagi e fa'aitiitia ai le tele o faila e aunoa ma le fa'afefeteina o ata. E mafai ona aofia ai le faʻaaogaina taofiofia o ata meafaigaluega, faʻaitiitia le numera o lanu faʻaaogaina i le ata, ma toe faʻaleleia le ata i ona fua sili ona lelei aʻo leʻi tuʻuina atu i le imeli.
  • Aloese mai ata lapopoa i tua e mafai ona faagesegese ai taimi e ave ai imeli.
  • Animated GIFs e mafai ona lapopoa i le faila faila nai lo ata faʻapitoa ona o le tele o faʻavaa e manaʻomia e fatu ai le animation, ia mautinoa e teu lelei i lalo ole 1 Mb.

Douglas Karr

Douglas Karr o CMO o OpenINSIGHTS ma le na faavaeina le Martech Zone. Ua fesoasoani Douglas i le tele o amataga manuia o MarTech, ua fesoasoani i le filiga tatau o le sili atu i le $ 5 piliona i le mauaina o le Martech ma tupe teufaafaigaluega, ma o loʻo faʻaauau pea ona fesoasoani i kamupani i le faʻatinoina ma le otometi a latou faʻatauga ma maketi. Douglas ose suiga fa'atekinolosi fa'avaomalo fa'avaomalo ma MarTech fa'apitoa ma failauga. O Douglas foi o se tusitala lolomi o le Dummie's guide ma se tusi taʻitaʻi pisinisi.

Faatatau Mataupu Faavae o

Toe i le pito i luga
lata

Ua maua le Adblock

Martech Zone e mafai ona tu'uina atu ia te oe lenei 'anotusi e aunoa ma se tau aua matou te fa'atupeina la matou 'upega tafa'ilagi e ala i tupe maua fa'asalalauga, so'oga fa'atasi, ma lagolago. Matou te fa'afetai pe a e aveese lau fa'asalalauga fa'asalalau a'o e va'ai i la matou saite.