Īmēra Marketing & Aunoatanga

Me pehea te Whakamahi i nga Whakaahua Whakataunga-Teitei mo nga Whakaaturanga Retina I To Email HTML

Ko te whakaaturanga Retina he kupu hokohoko e whakamahia ana e Apple ki te whakaahua i tetahi whakaaturanga taumira teitei he nui te kiato pika e kore e taea e te kanohi tangata te wehewehe i nga pika takitahi i te tawhiti tirohanga. Ko te whakaaturanga retina he 300 pika ia inihi te kiato pika (ppi) teitei ake ranei, he tino teitei ake i te whakaaturanga paerewa me te pika pika o 72 ppi.

Ko nga whakaaturanga Retina kua tino maamaa inaianei mo nga whakaaturanga, rorohiko rorohiko, taputapu pūkoro me nga papa. He maha nga kaihanga inaianei ka tuku whakaaturanga taumira teitei me nga pika pika e rite ana, neke atu ranei i era o nga whakaaturanga Retina a Apple.

CSS Hei Whakaatu I Te Whakaahua Whakatau Teitei Mo Te Whakaatu Retina

Ka taea e koe te whakamahi i te waehere CSS e whai ake nei hei uta i tetahi ahua taumira teitei mo te whakaaturanga Retina. Ka kitea e tenei waehere te kiato pika o te taputapu ka utaina te ahua ki te @ 2x kumuri mo nga whakaaturanga Retina, i te wa e utaina ana te ahua taumira paerewa mo etahi atu whakaaturanga.

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

Ko tetahi atu huarahi ko te whakamahi whakairoiro vector ranei SVG whakaahua, ka taea te tauine ki tetahi taumira me te kore e ngaro te kounga. Anei he tauira:

<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 tenei tauira, ka whakauruhia te waehere SVG ki te imeera HTML ma te whakamahi i te <svg> tohu. Ko te viewBox Ko te huanga ka tautuhi i nga rahi o te ahua SVG, ko te xmlns ka tohu te huanga i te mokowāingoa XML mo SVG.

te max-width kua whakaritea te taonga ki runga i te div huānga ki te whakarite kia tauine aunoa te ahua SVG kia uru ki te waahi e waatea ana, tae atu ki te whanui nui o te 300px i tenei keehi. He mahi pai tenei mo te whakarite kia whakaatu tika nga whakaahua SVG ki nga taputapu katoa me nga kaihoko imeera.

Tuhipoka: Ka rereke te tautoko SVG i runga i te kaihoko imeera, no reira he mea nui ki te whakamatautau i to imeera ki nga kaihoko maha kia pai ai te whakaatu o te ahua SVG.

Ko tetahi atu huarahi ki te whakawaehere i nga imeera HTML mo nga whakaaturanga Retina ko te whakamahi srcset. Ma te whakamahi i te huanga srcset ka taea e koe te whakarato whakaahua taumira teitei mo nga whakaaturanga Retina me te whakarite kia tika te rahi o nga whakaahua mo nga taputapu taumira iti.

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

I roto i tenei tauira, te srcset Ka whakaratohia e te huanga nga puna whakaahua e rua: image.jpg mo nga taputapu me te taumira o te 600 pika iti iho ranei, a image@2x.jpg mo nga taputapu he 1200 pika neke atu ranei. Ko te 600w a 1200w ka tohua e nga kaiwhakaahua te rahi o nga whakaahua i roto i nga pika, ka awhina i te kaitirotiro ki te whakatau ko wai te ahua hei tango i runga i te whakataunga o te taputapu.

Kaore nga kaihoko imeera katoa e tautoko ana i te srcset huanga. Te taumata tautoko mo srcset Ka taea te rereke rereke i runga i te kaihoko imeera, na he mea nui ki te whakamatautau i o imeera ki nga kaihoko maha kia pai ai te whakaatu o nga whakaahua.

HTML Mo nga Whakaahua I roto i te Imeera Kua Arotau Mo Nga Whakaaturanga Retina

ka taea te tohu i tetahi imeera HTML urupare e whakaatu tika ana i tetahi ahua ki te taumira kua arotauhia mo nga whakaaturanga retina. Anei me pehea:

  1. Waihangahia he ahua taumira teitei e rua te rahi o te ahua pono e hiahia ana koe ki te whakaatu i roto i te imeera. Hei tauira, ki te hiahia koe ki te whakaatu i te ahua 300x200, hanga he ahua 600x400.
  2. Tiakina te whakaahua taumira teitei me te @ 2x kumara. Hei tauira, mena ko to ahua taketake image.png, tiakina te putanga taumira teitei hei image@2x.png.
  3. I to waehere imeera HTML, whakamahia te waehere e whai ake nei hei whakaatu i te ahua:
<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)]> he korero herenga e whakamahia ana ki te aro ki nga putanga motuhake o Microsoft Outlook, e whakamahi ana i a Microsoft Word ki te whakaputa i nga imeera HTML. He rerekee te miihini whakaputa HTML a Microsoft Word mai i etahi atu kaihoko imeera me nga kaitirotiro paetukutuku, na reira me whakahaere motuhake. Ko te

(gte mso 9) Ka tirohia e te ahuatanga mehemea he nui ake, he rite ranei te putanga Microsoft Office ki te 9, e rite ana ki a Microsoft Office 2000. |(IE) Ka tirohia e te ahuatanga mehemea ko Internet Explorer te kiritaki, e whakamahia ana e Microsoft Outlook.

Īmēra HTML Me te Whakaatu Retina Atahanga Kua Arotauhia

Anei tetahi tauira o te waehere imeera HTML whakautu e whakaatu ana i tetahi ahua ki tetahi taumira kua arotauhia mo nga whakaaturanga retina:

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

Tohutohu Atahanga Whakaatu Retina

Anei etahi atu tohutohu mo te arotau i o Email HTML mo nga whakaahua kua whakatikahia mo nga whakaaturanga Retina:

  • Kia mahara ki te whakauru i o tohu ahua ki te whakamahi alt kupu hei whakarato horopaki mo te ahua.
  • Arotauhia nga whakaahua mo te paetukutuku ki te whakaiti i te rahi o te konae me te kore e whakararu i te kounga o te ahua. Ka taea e tenei te whakauru ki te whakamahi pikitia pikitia nga taputapu, te whakaiti i te maha o nga tae e whakamahia ana i roto i te ahua, me te whakarereke i te ahua ki ona rahi tino pai i mua i te tuku ki te imeera.
  • A ape i nga whakaahua papamuri nui ka taea te whakaroa i nga waa uta imeera.
  • Ko nga GIF pakiwaituhi ka nui ake te rahi o te konae i nga whakaahua pateko na te maha o nga papa e hiahiatia ana hei hanga i te hākoritanga, kia mau ki raro i te 1 Mb.

Douglas Karr

Douglas Karr he CMO o OpenINSIGHTS me te kaiwhakarewa o te Martech Zone. Kua awhina a Douglas i te tini o nga tiimatanga angitu a MarTech, kua awhina i te whakapau kaha ki te neke atu i te $5 piriona i roto i nga hokonga me nga haumitanga a Martech, me te awhina tonu i nga kamupene ki te whakatinana me te whakaaunoa i a raatau rautaki hoko me te hokohoko. Ko Douglas he huringa matihiko e mohiotia ana i te ao, he tohunga me te kaikorero a MarTech. Ko Douglas hoki te kaituhi i whakaputaina mo te aratohu a Dummie me te pukapuka kaiarahi pakihi.

Tefito pā

Hoki ki te pihi papa
Katia

Kua kitea te Adblock

Martech Zone Ka taea e ia te whakarato ki a koe i enei mea kaore he utu na te mea ka whakawhiwhihia e matou to maatau papaanga ma te whiwhinga moni panui, hononga hononga, me nga kaitautoko. Ka maioha matou ki te tangohia e koe to aukati panui i a koe e tiro ana i to maatau papaanga.