Email Marketing & Automation

Mokhoa oa ho Sebelisa Lits'oants'o tse Phahameng ka ho Fetisisa bakeng sa Lipontšo tsa Retina ho Imeile ea Hau ea HTML

Pontšo ea retina ke lentsoe la papatso le sebelisoang ke Apple ho hlalosa ponts'o e phahameng e nang le pixel density e phahameng hoo leihlo la motho le sitoang ho khetholla lipikselse ka bomong sebakeng se tloaelehileng sa ho shebella. Pontšo ea retina hangata e na le pixel density ea 300 pixels ka inch (ppi) kapa hodimo, e leng hodimo haholo ho feta pontsho e tlwaelehileng e nang le pixel density ya 72 ppi.

Lits'oants'o tsa retina joale li se li atile haholo bakeng sa lipontšo, lilaptop, lisebelisoa tsa mohala le matlapa. Baetsi ba bangata hona joale ba fana ka lipontšo tse phahameng tse nang le pixel density tse tsamaellanang kapa tse fetang tsa Apple's Retina.

CSS Ho Bontša Sets'oants'o sa Qeto e Phahameng Bakeng sa Pontšo ea Retina

U ka sebelisa khoutu e latelang ea CSS ho kenya setšoantšo sa boemo bo holimo bakeng sa pontšo ea Retina. Khoutu ena e lemoha boima ba pixel ea sesebelisoa ebe e kenya setšoantšo ka ho @2x suffix bakeng sa lipontšo tsa Retina, ha u ntse u kenya setšoantšo sa boemo bo tloaelehileng bakeng sa lipontšo tse ling.

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

Mokhoa o mong ke oa ho sebelisa litšoantšo tsa vector kapa SVG litšoantšo, tse ka fihlelang qeto efe kapa efe ntle le ho lahleheloa ke boleng. Mohlala ke ona:

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

Mohlaleng ona, khoutu ea SVG e kentsoe ka kotloloho ho lengolo-tsoibila la HTML ho sebelisoa file ea <svg> tag. The viewBox tšobotsi e hlalosa boholo ba setšoantšo sa SVG, ha xmlns tšobotsi e totobatsa sebaka sa mabitso sa XML bakeng sa SVG.

The max-width thepa e behiloeng holim'a div ntho ea ho netefatsa hore setšoantšo sa SVG se iteka ka bohona hore se lekane sebaka se fumanehang, ho fihlela bophara bo boholo ba 300px tabeng ena. Ena ke mokhoa o motle ka ho fetisisa oa ho netefatsa hore litšoantšo tsa SVG li hlahisoa hantle lisebelisoa tsohle le bareki ba imeile.

Hlokomela: Ts'ehetso ea SVG e ka fapana ho latela moreki oa lengolo-tsoibila, kahoo ho bohlokoa ho lekola lengolo-tsoibila la hau ho bareki ba bangata ho netefatsa hore setšoantšo sa SVG se hlaha hantle.

Mokhoa o mong oa ho khouta mangolo-tsoibila a HTML bakeng sa lipontšo tsa Retina ke ho sebelisa srcset. Ho sebelisa tšobotsi ea srcset ho u lumella ho fana ka litšoantšo tsa boemo bo holimo bakeng sa lipontšo tsa Retina ha u ntse u etsa bonnete ba hore litšoantšo li lekane hantle bakeng sa lisebelisoa tsa boleng bo tlaase.

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

Mohlala ona, srcset tšobotsi e fana ka mehloli e 'meli ea litšoantšo: image.jpg bakeng sa lisebelisoa tse nang le qeto ea lipikselse tse 600 kapa ka tlase, le image@2x.jpg bakeng sa lisebelisoa tse nang le qeto ea lipikselse tse 1200 kapa ho feta. The 600w 'me 1200w Litlhaloso li hlakisa boholo ba litšoantšo ka lipikselse, tse thusang sebatli ho tseba hore na ke setšoantšo sefe se lokelang ho khoasolla ho latela qeto ea sesebelisoa.

Ha se bareki bohle ba imeile ba tšehetsang srcset tšobotsi. Boemo ba tšehetso bakeng sa srcset e ka fapana haholo ho latela moreki oa lengolo-tsoibila, kahoo ho bohlokoa ho lekola li-imeile tsa hau ho bareki ba bangata ho netefatsa hore litšoantšo li hlahisoa hantle.

HTML Bakeng sa Litšoantšo ho Imeile Optimized Bakeng sa Lipontšo tsa Retina

hoa khoneha ho khouta lengolo-tsoibila le arabelang la HTML le tla hlahisa setšoantšo hantle ka qeto e ntlafalitsoeng bakeng sa lipontšo tsa retina. Mokhoa ona ke ona:

  1. Etsa setšoantšo sa boemo bo holimo se lekanang le habeli sa setšoantšo seo u batlang ho se hlahisa ho lengolo-tsoibila. Ka mohlala, haeba u batla ho hlahisa setšoantšo sa 300×200, etsa setšoantšo sa 600×400.
  2. Boloka setšoantšo sa boemo bo holimo ka ho @2x sehlomathisi. Mohlala, haeba setšoantšo sa hau sa mantlha se image.png, boloka phetolelo e phahameng ka ho fetisisa e le setšoantšo@2x.png.
  3. Khoutung ea hau ea lengolo-tsoibila, sebelisa khoutu e latelang ho hlahisa setšoantšo:
<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)]> ke maikutlo a nang le maemo a sebelisoang ho shebana le mefuta e itseng ea Microsoft Outlook, e sebelisang Microsoft Word ho fana ka mangolo-tsoibila a HTML. Enjine ea ho fana ka HTML ea Microsoft Word e ka fapana haholo le bareki ba bang ba lengolo-tsoibila le libatli tsa marang-rang, kahoo hangata e hloka ho tšoaroa ka mokhoa o khethehileng. The

(gte mso 9) boemo bo hlahloba hore na mofuta oa Microsoft Office o moholo ho feta kapa o lekana le 9, e tsamaellanang le Microsoft Office 2000. |(IE) boemo bo hlahloba hore na moreki ke Internet Explorer, e sebelisoang hangata ke Microsoft Outlook.

HTML Email With Retina Display Optimized Images

Mohlala ke ona oa khoutu ea lengolo-tsoibila ea HTML e arabelang e bonts'ang setšoantšo ka qeto e ntlafalitsoeng bakeng sa lipontšo tsa 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>

Litlhahiso tsa Sets'oants'o sa Retina

Litlhahiso tse ling tsa ho ntlafatsa Li-imeile tsa hau tsa HTML ke tsena bakeng sa litšoantšo tse ntlafalitsoeng bakeng sa lipontšo tsa Retina:

  • Etsa bonnete ba hore kamehla li-tag tsa hau tsa setšoantšo li kenyelletsa ho sebelisa alt mongolo ho fana ka moelelo oa setšoantšo.
  • Ntlafatsa litšoantšo bakeng sa tepo ho fokotsa boholo ba faele ntle le ho senya boleng ba setšoantšo. Sena se ka kenyelletsa ho sebelisa compression ea setšoantšo lisebelisoa, ho fokotsa palo ea mebala e sebelisitsoeng setšoantšong, le ho fetola setšoantšo ho ea ho litekanyo tsa sona tse nepahetseng pele u se kenya ho imeile.
  • Qoba litšoantšo tse kholo tse ka fokotsang nako ea ho romelloa ha lengolo-tsoibila.
  • Li-GIF tsa animated li ka ba kholo ka boholo ba faele ho feta litšoantšo tse tsitsitseng ka lebaka la liforeimi tse ngata tse hlokahalang ho etsa animation, etsa bonnete ba hore u li boloka li le ka tlase ho 1. Mb.

Douglas Karr

Douglas Karr ke CMO ea Bula LITLHAKISO le mothehi oa Martech Zone. Douglas o thusitse batho ba bangata ba atlehileng ho qala ka MarTech, o thusitse boitelong bo nepahetseng ba chelete e fetang $5 bilione ho reka le matsete a Martech, mme o ntse a tsoela pele ho thusa lik'hamphani ho kenya ts'ebetsong le ho iketsetsa maano a bona a ho rekisa le ho bapatsa. Douglas ke setsebi le sebui sa MarTech se tsebahalang lefatšeng ka bophara. Douglas hape ke sengoli se hatisitsoeng sa tataiso ea Dummie le buka ea boetapele ba khoebo.

Related Articles

Konopo ea holimo
Close

Adblock e fumanwe

Martech Zone e khona ho u fa litaba tsena ntle ho tefo hobane re etsa chelete sebakeng sa rona sa marang-rang ka lekeno la lipapatso, likhokahano tsa kopanelo le lithuso tsa lichelete. Re ka thabela ha o ka tlosa se thibelang lipapatso ha u ntse u sheba sebaka sa rona sa marang-rang.