Tölvupóstmarkaðssetning og sjálfvirkni

Hvernig á að nota háupplausnarmyndir fyrir sjónhimnuskjái í HTML tölvupóstinum þínum

Retina display er markaðshugtak sem notað er af Apple að lýsa skjá með mikilli upplausn sem hefur nógu mikla pixlaþéttleika til að mannsaugað geti ekki greint einstaka pixla í dæmigerðri útsýnisfjarlægð. Sjónuskjár hefur venjulega pixlaþéttleika upp á 300 pixla á tommu (pát) eða hærra, sem er verulega hærra en venjulegur skjár með pixlaþéttleika upp á 72 ppi.

Retina skjáir eru nú frekar almennir fyrir skjái, fartölvur, farsíma og spjaldtölvur. Margir framleiðendur bjóða nú upp á skjái í hárri upplausn með pixlaþéttleika sem samsvarar eða fer yfir Retina skjái frá Apple.

CSS til að sýna mynd með hærri upplausn fyrir sjónhimnuskjá

Þú getur notað eftirfarandi CSS kóða til að hlaða mynd í hárri upplausn fyrir Retina skjá. Þessi kóði greinir pixlaþéttleika tækisins og hleður myndina með @ 2x viðskeyti fyrir Retina skjái, en hleður inn myndinni með venjulegri upplausn fyrir aðra skjái.

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

Önnur aðferð er að nota vektorgrafík eða SVG myndir, sem geta skalað í hvaða upplausn sem er án þess að tapa gæðum. Hér er dæmi:

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

Í þessu dæmi er SVG kóðinn felldur beint inn í HTML tölvupóstinn með því að nota <svg> merki. The viewBox eiginleiki skilgreinir stærð SVG myndarinnar, en xmlns eigind tilgreinir XML nafnrýmið fyrir SVG.

The max-width eign er sett á div þáttur til að tryggja að SVG myndin skalast sjálfkrafa til að passa við laus pláss, allt að hámarksbreidd 300px í þessu tilfelli. Þetta er besta starfsvenjan til að tryggja að SVG myndir séu birtar á réttan hátt á öllum tækjum og tölvupóstforritum.

Athugaðu: SVG stuðningur getur verið mismunandi eftir tölvupóstforriti, svo það er mikilvægt að prófa tölvupóstinn þinn á mörgum viðskiptavinum til að tryggja að SVG myndin sé rétt birt.

Önnur leið til að kóða HTML tölvupóst fyrir Retina skjái er að nota srcset. Með því að nota srcset eiginleikann geturðu útvegað myndir í hárri upplausn fyrir Retina skjái á sama tíma og þú tryggir að myndirnar séu í réttri stærð fyrir tæki með lægri upplausn.

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

Í þessu dæmi er srcset eiginleiki veitir tvær myndaheimildir: image.jpg fyrir tæki með 600 pixla upplausn eða minni, og image@2x.jpg fyrir tæki með 1200 pixla upplausn eða meira. The 600w og 1200w lýsingar tilgreina stærð myndanna í pixlum, sem hjálpar vafranum að ákvarða hvaða mynd á að hlaða niður miðað við upplausn tækisins.

Ekki styðja allir tölvupóstforrit srcset eiginleiki. Stuðningsstig fyrir srcset getur verið mjög mismunandi eftir tölvupóstforritinu, svo það er mikilvægt að prófa tölvupóstinn þinn á mörgum viðskiptavinum til að tryggja að myndirnar séu birtar á réttan hátt.

HTML fyrir myndir í tölvupósti fínstillt fyrir sjónhimnuskjái

það er hægt að kóða móttækilegan HTML tölvupóst sem mun birta mynd á réttan hátt í upplausn sem er fínstillt fyrir sjónhimnuskjái. Svona:

  1. Búðu til mynd í hárri upplausn sem er tvöfalt stærri en raunveruleg mynd sem þú vilt birta í tölvupóstinum. Til dæmis, ef þú vilt sýna 300×200 mynd skaltu búa til 600×400 mynd.
  2. Vistaðu myndina í hárri upplausn með @ 2x viðskeyti. Til dæmis, ef upprunalega myndin þín er image.png, vistaðu háupplausnarútgáfuna sem mynd@2x.png.
  3. Notaðu eftirfarandi kóða í HTML tölvupóstkóðanum þínum til að birta myndina:
<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)]> er skilyrt athugasemd sem er notuð til að miða á sérstakar útgáfur af Microsoft Outlook, sem notar Microsoft Word til að birta HTML tölvupóst. HTML flutningsvél Microsoft Word getur verið töluvert frábrugðin öðrum tölvupóstforritum og vefvöfrum, svo það þarf oft sérstaka meðhöndlun. The

(gte mso 9) ástand athugar hvort Microsoft Office útgáfan sé stærri en eða jöfn 9, sem samsvarar Microsoft Office 2000. |(IE) ástand athugar hvort biðlarinn sé Internet Explorer, sem er oft notað af Microsoft Outlook.

HTML tölvupóstur með fínstilltum myndum á sjónuskjá

Hér er dæmi um móttækilegan HTML tölvupóstkóða sem sýnir mynd í upplausn sem er fínstillt fyrir sjónhimnuskjái:

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

Ábendingar um mynd á sjónhimnu

Hér eru nokkur viðbótarráð til að fínstilla HTML tölvupóstinn þinn fyrir myndir sem eru fínstilltar fyrir Retina skjái:

  • Vertu viss um að hafa alltaf myndmerkin þín með því að nota alt texta til að skapa samhengi fyrir myndina.
  • Fínstilltu myndir fyrir vefinn til að minnka skráarstærð án þess að skerða myndgæði. Þetta getur falið í sér að nota myndþjöppun verkfæri, fækka litum sem notaðir eru í myndinni og breyta stærð myndarinnar í bestu stærðir áður en hún er hlaðið upp í tölvupóstinn.
  • Forðastu stórar bakgrunnsmyndir sem geta hægt á hleðslutíma tölvupósts.
  • Hreyfimyndir GIF geta verið stærri í skráarstærð en kyrrstæðar myndir vegna margra ramma sem þarf til að búa til hreyfimyndina, vertu viss um að halda þeim vel undir 1 Mb.

Douglas Karr

Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

tengdar greinar

Til baka efst á hnappinn
Loka

Auglýsingablokk greind

Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.