Email Marketing & Automation

Mashandisiro Ekushandisa Yakakwirira-Resolution Mifananidzo yeRetina Inoratidza Mune Yako HTML Email

Retina kuratidza izwi rekushambadzira rinoshandiswa ne apuro kutsanangura chiratidziro chepamusoro chine pixel density yakakwira zvekuti ziso remunhu harikwanise kusiyanisa mapikisi ega ega pachinhambwe chekutarisa. Retina kuratidza kazhinji ine pixel density ye300 pixels pa inch (ppi) kana pamusoro, iyo yakanyanya kukwirisa kupfuura yakajairika kuratidza ine pixel density ye72 ppi.

Zviratidziro zveretina zvino zvave zvakakurumbira zvekuratidzira, malaptop, nharembozha, uye mahwendefa. Vazhinji vagadziri ikozvino vanopa yakakwirira-resolution zviratidziro zvine mapixel densities anofanana kana kupfuura ayo eApple's Retina kuratidza.

CSS Kuratidza Mufananidzo Wepamusoro Resolution YeRetina Display

Iwe unogona kushandisa inotevera CSS kodhi kurodha mufananidzo wepamusoro-resolution yeRetina kuratidza. Iyi kodhi inoona iyo pixel density yemudziyo uye inotakura mufananidzo ne @ 2x chivakashure chezviratidziro zveRetina, uku uchirodha mufananidzo-wekugadzirisa kune mamwe maratidziro.

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

Imwe nzira ndeye kushandisa vector graphics kana SVG mifananidzo, iyo inogona kukwira kune chero sarudzo pasina kurasikirwa nemhando. Heino muenzaniso:

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

Mumuenzaniso uyu, iyo SVG kodhi yakanyudzwa zvakananga muHTML email uchishandisa iyo <svg> tag. Iyo viewBox hunhu hunotsanangura zviyero zvemufananidzo weSVG, nepo iyo xmlns hunhu hunotsanangura iyo XML namespace yeSVG.

The max-width property yakaiswa pa div chinhu chekuona kuti iyo SVG mufananidzo inoyera otomatiki kuti ikwane nzvimbo iripo, kusvika pahupamhi hwepamusoro hwe300px mune iyi kesi. Iyi ndiyo yakanakisa tsika yekuona kuti SVG mifananidzo inoratidzwa nemazvo pamidziyo yese uye email vatengi.

Cherechedza: Tsigiro yeSVG inogona kusiyana zvichienderana nemutengi weemail, saka zvakakosha kuti uedze email yako pane akawanda makasitoma kuti uone kuti mufananidzo weSVG unoratidzwa nemazvo.

Imwe nzira yekukodha maemail eHTML yeRetina kuratidza ndeye kushandisa srcset. Kushandisa iyo srcset hunhu hunobvumidza iwe kuti upe yakakwirira-resolution mifananidzo yeRetina inoratidzwa uku uchiona kuti mifananidzo yacho yakakurisa zvakakurisa kune yakaderera-resolution zvishandiso.

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

Mumuenzaniso uyu, iyo srcset hunhu hunopa maviri emifananidzo masosi: image.jpg yemidziyo ine resolution ye600 pixels kana pasi, uye image@2x.jpg yemidziyo ine resolution ye1200 pixels kana kupfuura. The 600w uye 1200w vatsananguri vanotsanangura saizi yemifananidzo mumapikiseli, izvo zvinobatsira mubrowser kuona kuti ndeupi mufananidzo wekudhaunirodha zvichienderana nekugadziriswa kwemudziyo.

Havasi vese email vatengi vanotsigira iyo srcset hunhu. Chiyero chekutsigira srcset inogona kusiyana zvakanyanya zvichienderana nemutengi weemail, saka zvakakosha kuti uedze maemail ako kune akawanda makasitoma kuti uone kuti mifananidzo inoratidzwa nemazvo.

HTML Yezvifananidzo MuImeyili Yakagadzirirwa Kune Retina Inoratidza

zvinokwanisika kukodha email inopindura HTML iyo inonyatso kuratidza mufananidzo pachigadziro chakagadziridzwa kuratidzwa kweretina. Heino maitiro:

  1. Gadzira mufananidzo wepamusoro-soro wakapetwa kaviri saizi yemufananidzo chaiwo waunoda kuratidza mune email. Semuenzaniso, kana iwe uchida kuratidza 300×200 mufananidzo, gadzira 600×400 mufananidzo.
  2. Sevha iyo yepamusoro-resolution mufananidzo neiyo @ 2x suffix. Semuenzaniso, kana mufananidzo wako wepakutanga uri image.png, chengetedza shanduro yepamusoro-resolution se mufananidzo@2x.png.
  3. Mune yako HTML email kodhi, shandisa inotevera kodhi kuratidza mufananidzo:
<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)]> ishoko rine zvimiso rinoshandiswa kunangana neshanduro dzakati dzeMicrosoft Outlook, inoshandisa Microsoft Word kupa maemail eHTML. Microsoft Word's HTML rendering injini inogona kunyatsosiyana kubva kune mamwe maemail vatengi uye web browser, saka inowanzoda yakakosha kubata. The

(gte mso 9) mamiriro anotarisa kana shanduro yeMicrosoft Office yakakura kudarika kana kuenzana na9, iyo inoenderana neMicrosoft Office 2000. |(IE) mamiriro anotarisa kana mutengi ari Internet Explorer, iyo inowanzoshandiswa neMicrosoft Outlook.

HTML Imeyili Ine Retina Ratidza Optimized Images

Heino muenzaniso weiyo inopindura HTML email kodhi inoratidza mufananidzo pachigadziro chakagadziridzwa kuratidzwa kweretina:

<!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 Ratidza Mufananidzo Mazano

Heano mamwe matipi ekuwedzera ekugadzirisa maEmail ako eHTML emifananidzo yakagadziridzwa kuratidzwa kweRetina:

  • Ita shuwa kuti unogara uine ma tag ako emufananidzo anosanganisira kushandisa alt zvinyorwa kuti zvipe mamiriro emufananidzo.
  • Gadzirisa mifananidzo yewebhu kuderedza saizi yefaira pasina kukanganisa kunaka kwemufananidzo. Izvi zvinogona kusanganisira kushandisa compression yemufananidzo zvishandiso, kuderedza huwandu hwemavara anoshandiswa mumufananidzo, uye kudzoreredza chifananidzo kusvika kune yakaringana zviyero usati waisa kune iyo email.
  • Dzivisa mapikicha makuru ekumashure anogona kunonoka kurodha email nguva.
  • Animated GIFs anogona kunge akakura muhukuru hwefaira pane static mifananidzo nekuda kweakawanda mafuremu anodiwa kugadzira iwo animation, ive shuwa yekuachengeta zvakanaka pasi pe1. Mb.

Douglas Karr

Douglas Karr ndiye CMO OpenINSIGHTS uye muvambi we Martech Zone. Douglas akabatsira akawanda ekubudirira kweMarTech kutanga, akabatsira mukushingairira kweanopfuura madhora mashanu emadhora mukutenga nekudyara kweMartech, uye anoenderera mberi nekubatsira makambani kuita nekuita otomatiki nzira dzawo dzekutengesa nekutengesa. Douglas inyanzvi inozivikanwa pasi rese yedhijitari uye MarTech nyanzvi uye mutauri. Douglas zvakare munyori akaburitswa wegwaro raDummie uye bhuku rehutungamiriri hwebhizinesi.

Related Articles

Kudzoka kumusoro
pedyo

Adblock Yaonekwa

Martech Zone inokwanisa kukupa izvi zvemukati pasina muripo nekuti isu tinoita mari saiti yedu kuburikidza nemari yekushambadza, affiliate links, uye kutsigira. Tinozotenda kana iwe ukabvisa yako ad blocker iwe paunoona yedu saiti.