I-imeyili Marketing & Automation

Uzisebenzisa Kanjani Izithombe Ezinokulungiswa Okuphezulu Zokuboniswa Kwe-retina Ku-imeyili Yakho Ye-HTML

Isibonisi se-retina yitemu lokumaketha elisetshenziswa ngu Apple ukuchaza isibonisi esinokucaca okuphezulu esinokuminyana kwephikseli ukuphakama ngokwanele kangangokuthi iso lomuntu alikwazi ukuhlukanisa amaphikseli ngamanye ebangeni elijwayelekile lokubuka. Isibonisi se-retina sivamise ukuba nokuminyana kwephikseli okungamaphikseli angu-300 iyintshi ngayinye (ppi) noma ngaphezulu, okungaphezulu kakhulu kwesibonisi esijwayelekile esinobukhulu bephikseli obungu-72 ppi.

Izibonisi ze-retina manje sezijwayelekile kakhulu kwizibonisi, amakhompyutha aphathekayo, amadivaysi eselula, namathebulethi. Abakhiqizi abaningi manje banikeza izibonisi ezinokulungiswa okuphezulu ezinokuminyana kwamaphikseli afana noma adlule lawo okubonisa i-Retina ye-Apple.

I-CSS Ukuze Ubonise Isithombe Esinokulungiswa Okuphezulu Kwesibonisi Se-retina

Ungasebenzisa ikhodi elandelayo ye-CSS ukuze ulayishe isithombe esinokucaca okuphezulu kwesibonisi se-Retina. Le khodi ithola ukuminyana kwephikseli yedivayisi bese ilayisha isithombe nge- @ 2x isijobelelo sezibonisi ze-Retina, ngenkathi ilayisha isithombe sokucaca okujwayelekile kwezinye izibonisi.

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

Enye indlela ukusebenzisa ihluzo ze-vector noma I-SVG izithombe, ezingafinyelela kunoma yikuphi ukulungiswa ngaphandle kokulahlekelwa yikhwalithi. Nasi isibonelo:

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

Kulesi sibonelo, ikhodi ye-SVG ishumekwe ngqo ku-imeyili ye-HTML kusetshenziswa i- <svg> umaka. I viewBox isibaluli sichaza ubukhulu besithombe se-SVG, kuyilapho i- xmlns isibaluli sicacisa indawo yegama ye-XML ye-SVG.

The max-width impahla isethwe phezu div into yokuqinisekisa ukuthi isithombe se-SVG sikala ngokuzenzakalelayo ukuze silingane isikhala esitholakalayo, sifike kububanzi obungu-300px kulesi simo. Lona umkhuba ongcono kakhulu wokuqinisekisa ukuthi izithombe ze-SVG ziboniswa kahle kuwo wonke amadivayisi namaklayenti e-imeyili.

Qaphela: Ukusekelwa kwe-SVG kungahluka kuye ngeklayenti le-imeyili, ngakho-ke kubalulekile ukuhlola i-imeyili yakho kumaklayenti amaningi ukuze uqinisekise ukuthi isithombe se-SVG siboniswa kahle.

Enye indlela yokufaka amakhodi ama-imeyili e-HTML yezibonisi ze-Retina ukusebenzisa srcset. Ukusebenzisa isibaluli se-srcset kukuvumela ukuthi unikeze izithombe zokucaca okuphezulu zokuboniswa kwe-Retina ngenkathi uqinisekisa ukuthi izithombe zilinganiswe ngokufanele kumadivayisi anokulungiswa okuphansi.

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

Kulesi sibonelo, i- srcset isibaluli sihlinzeka ngemithombo yesithombe emibili: image.jpg kumadivayisi anokulungiswa kwamaphikseli angama-600 noma ngaphansi, futhi image@2x.jpg kumadivayisi anokulungiswa kwamaphikseli angu-1200 noma ngaphezulu. I 600w futhi 1200w izichazili zicacisa usayizi wezithombe ngamaphikseli, okusiza isiphequluli sinqume ukuthi yisiphi isithombe esingasilanda ngokusekelwe ekulungisweni kwedivayisi.

Akuwona wonke amaklayenti e-imeyili asekela i- srcset isici. Izinga lokusekela srcset zingahluka kakhulu kuye ngeklayenti le-imeyili, ngakho-ke kubalulekile ukuhlola ama-imeyili akho kumaklayenti amaningi ukuze uqinisekise ukuthi izithombe ziboniswa kahle.

I-HTML Yezithombe Eziku-imeyili Elungiselelwe Ukuboniswa Kwe-retina

kungenzeka ukufaka ikhodi i-imeyili ye-HTML ephendulayo ezobonisa kahle isithombe ngokulungiswa okulungiselelwe ukuboniswa kwe-retina. Nansi indlela:

  1. Dala isithombe esinokucaca okuphezulu esiwusayizi ophindwe kabili wesithombe sangempela ofuna ukusibonisa ku-imeyili. Isibonelo, uma ufuna ukubonisa isithombe esingu-300×200, dala isithombe esingu-600×400.
  2. Londoloza isithombe esinokucaca okuphezulu nge- @ 2x isijobelelo. Isibonelo, uma isithombe sakho sangempela siyi image.png, gcina inguqulo enokulungiswa okuphezulu njenge isithombe@2x.png.
  3. Ekhodini lakho le-imeyili le-HTML, sebenzisa ikhodi elandelayo ukuze ubonise isithombe:
<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)]> ukuphawula okunemibandela okusetshenziselwa ukukhomba izinguqulo ezithile ze-Microsoft Outlook, esebenzisa i-Microsoft Word ukuze inikeze ama-imeyili e-HTML. Injini yokunikeza i-HTML ye-Microsoft Word ingase yehluke kakhulu kwamanye amaklayenti e-imeyili neziphequluli zewebhu, ngakho ngokuvamile idinga ukuphathwa okukhethekile. I

(gte mso 9) isimo sibheka ukuthi inguqulo ye-Microsoft Office inkulu yini noma ilingana no-9, ehambisana ne-Microsoft Office 2000. |(IE) isimo sibheka ukuthi iklayenti liyi-Internet Explorer, evame ukusetshenziswa yi-Microsoft Outlook.

I-imeyili Ye-HTML Ene-Retina Bonisa Izithombe Ezilungiselelwe

Nasi isibonelo sekhodi ye-imeyili ye-HTML ephendulayo ebonisa isithombe ngokulungiswa okulungiselelwe ukuboniswa kwe-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>

I-Retina Bonisa Amathiphu Esithombe

Nawa amanye amathiphu okuthuthukisa ama-imeyili akho e-HTML ukuze uthole izithombe ezilungiselelwe izibonisi ze-Retina:

  • Qiniseka ukuthi uhlale unamathegi esithombe sakho afaka phakathi ukusebenzisa alt umbhalo ukunikeza umongo wesithombe.
  • Lungiselela izithombe zewebhu ukuze wehlise usayizi wefayela ngaphandle kokufaka engozini ikhwalithi yesithombe. Lokhu kungabandakanya ukusebenzisa Ukuminyaniswa kwesithombe amathuluzi, ukunciphisa inani lemibala esetshenziswe esithombeni, kanye nokuguqula usayizi wesithombe sibe ubukhulu baso obufanele ngaphambi kokusilayisha ku-imeyili.
  • Gwema izithombe ezingemuva ezinkulu ezinganciphisa izikhathi zokulayisha ama-imeyili.
  • Ama-GIF opopayi angaba mkhulu ngosayizi wefayela kunezithombe ezimile ngenxa yozimele abaningi abadingekayo ukuze kudalwe ukugqwayiza, qiniseka ukuthi uwagcina engaphansi kokungu-1. Mb.

Douglas Karr

Douglas Karr i-CMO ye VulaINSIGHTS kanye nomsunguli we Martech Zone. UDouglas usize inqwaba yeziqalo eziphumelelayo ze-MarTech, uye wasiza ekukhuthaleni okungaphezu kuka-$5 bil ekuthengeni nasekutshalweni kwe-Martech, futhi uyaqhubeka nokusiza izinkampani ekusebenziseni nasekuzenzeleni amasu azo okuthengisa nokumaketha. UDouglas uyingcweti yokuguqula idijithali eyaziwa emhlabeni wonke kanye nesikhulumi se-MarTech. UDouglas futhi ungumbhali oshicilelwe wencwadi kaDummie kanye nencwadi yobuholi bebhizinisi.

Izihloko ezihlobene Nalesi

Buyela emuva kunkinobho phezulu
Close

I-Adblock itholiwe

Martech Zone iyakwazi ukukunikeza lokhu okuqukethwe ngaphandle kwenkokhiso ngoba senza imali ngesayithi yethu ngemali engenayo yezikhangiso, izixhumanisi ezingaphansi, noxhaso. Singajabula uma ungasusa i-ad blocker yakho njengoba ubuka isayithi lethu.