Uuzaji wa Barua pepe & Uendeshaji

Jinsi ya Kutumia Picha zenye Msongo wa Juu kwa Maonyesho ya Retina Katika Barua Pepe Yako ya HTML

Onyesho la retina ni neno la uuzaji linalotumiwa na Apple ili kuelezea onyesho la mwonekano wa juu ambalo lina msongamano wa saizi ya juu vya kutosha hivi kwamba jicho la mwanadamu haliwezi kutofautisha saizi mahususi katika umbali wa kawaida wa kutazama. Onyesho la retina kwa kawaida huwa na msongamano wa saizi 300 kwa inchi (ppi) au juu zaidi, ambayo ni ya juu zaidi kuliko onyesho la kawaida lenye msongamano wa pikseli 72 ppi.

Maonyesho ya retina sasa ni ya kawaida kabisa kwa skrini, kompyuta ndogo, vifaa vya rununu na kompyuta ndogo. Watengenezaji wengi sasa wanatoa onyesho zenye mwonekano wa juu na msongamano wa saizi zinazolingana au kuzidi zile za maonyesho ya Retina ya Apple.

CSS Kuonyesha Picha ya Msongo wa Juu Kwa Onyesho la Retina

Unaweza kutumia msimbo ufuatao wa CSS kupakia picha ya mwonekano wa juu kwa onyesho la Retina. Msimbo huu hutambua uzito wa pikseli ya kifaa na kupakia picha kwa kutumia @ 2x kiambishi tamati cha maonyesho ya Retina, huku ikipakia picha ya mwonekano wa kawaida kwa maonyesho mengine.

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

Njia nyingine ni kutumia picha za vekta au Faili picha, ambazo zinaweza kufikia azimio lolote bila kupoteza ubora. Hapa kuna mfano:

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

Katika mfano huu, msimbo wa SVG umepachikwa moja kwa moja kwenye barua pepe ya HTML kwa kutumia <svg> tagi. The viewBox sifa inafafanua vipimo vya picha ya SVG, wakati xmlns sifa inabainisha nafasi ya majina ya XML ya SVG.

The max-width mali imewekwa kwenye div kipengele cha kuhakikisha kuwa picha ya SVG inajipanga kiotomatiki ili kutoshea nafasi inayopatikana, hadi upana wa juu wa 300px katika hali hii. Hii ni mbinu bora ya kuhakikisha kuwa picha za SVG zinaonyeshwa ipasavyo kwenye vifaa vyote na wateja wa barua pepe.

Kumbuka: Usaidizi wa SVG unaweza kutofautiana kulingana na mteja wa barua pepe, kwa hivyo ni muhimu kujaribu barua pepe yako kwa wateja wengi ili kuhakikisha kuwa picha ya SVG inaonyeshwa vizuri.

Njia nyingine ya kusimba barua pepe za HTML kwa maonyesho ya Retina ni kutumia srcset. Kutumia sifa ya srcset hukuruhusu kutoa picha zenye mwonekano wa juu kwa ajili ya maonyesho ya Retina huku ukihakikisha kwamba picha zimepimwa ipasavyo kwa vifaa vya ubora wa chini.

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

Katika mfano huu, srcset sifa hutoa vyanzo viwili vya picha: image.jpg kwa vifaa vilivyo na azimio la saizi 600 au chini, na image@2x.jpg kwa vifaa vilivyo na azimio la saizi 1200 au zaidi. The 600w na 1200w vifafanuzi hubainisha ukubwa wa picha katika pikseli, ambayo husaidia kivinjari kuamua ni picha gani ya kupakua kulingana na ubora wa kifaa.

Sio wateja wote wa barua pepe wanaotumia srcset sifa. Kiwango cha msaada kwa srcset inaweza kutofautiana sana kulingana na mteja wa barua pepe, kwa hivyo ni muhimu kujaribu barua pepe zako kwa wateja wengi ili kuhakikisha kuwa picha zinaonyeshwa vizuri.

HTML Kwa Picha Katika Barua Pepe Iliyoboreshwa Kwa Maonyesho ya Retina

inawezekana kuweka msimbo barua pepe sikivu ya HTML ambayo itaonyesha picha ipasavyo katika azimio lililoboreshwa kwa maonyesho ya retina. Hivi ndivyo jinsi:

  1. Unda picha ya ubora wa juu ambayo ni ukubwa maradufu wa picha halisi unayotaka kuonyesha kwenye barua pepe. Kwa mfano, ikiwa unataka kuonyesha picha ya 300×200, unda picha ya 600×400.
  2. Hifadhi picha ya ubora wa juu na @ 2x kiambishi tamati. Kwa mfano, ikiwa picha yako ya asili ni image.png, hifadhi toleo la azimio la juu kama picha@2x.png.
  3. Katika msimbo wako wa barua pepe wa HTML, tumia msimbo ufuatao ili kuonyesha picha:
<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)]> ni maoni ya masharti ambayo hutumiwa kulenga matoleo mahususi ya Microsoft Outlook, ambayo hutumia Microsoft Word kutoa barua pepe za HTML. Injini ya utoaji ya HTML ya Microsoft Word inaweza kuwa tofauti kabisa na wateja wengine wa barua pepe na vivinjari vya wavuti, kwa hivyo mara nyingi huhitaji utunzaji maalum. The

(gte mso 9) hali hukagua ikiwa toleo la Microsoft Office ni kubwa kuliko au sawa na 9, ambalo linalingana na Microsoft Office 2000. |(IE) hali huangalia ikiwa mteja ni Internet Explorer, ambayo hutumiwa mara nyingi na Microsoft Outlook.

Barua pepe ya HTML yenye Picha Zilizoboreshwa za Retina

Huu hapa ni mfano wa msimbo wa barua pepe wa HTML unaojibu ambao unaonyesha picha katika ubora ulioboreshwa kwa maonyesho ya 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>

Vidokezo vya Picha vya Kuonyesha Retina

Hapa kuna vidokezo vya ziada juu ya kuboresha Barua pepe zako za HTML kwa picha zilizoboreshwa kwa maonyesho ya Retina:

  • Hakikisha kuwa na vitambulisho vyako vya picha kila wakati pamoja na kutumia alt maandishi ili kutoa muktadha wa picha.
  • Boresha picha za wavuti ili kupunguza ukubwa wa faili bila kuathiri ubora wa picha. Hii inaweza kujumuisha kutumia ukandamizaji wa picha zana, kupunguza idadi ya rangi zinazotumiwa kwenye picha, na kubadilisha ukubwa wa picha hadi vipimo vyake vyema kabla ya kuipakia kwenye barua pepe.
  • Epuka picha kubwa za mandharinyuma ambazo zinaweza kupunguza kasi ya upakiaji wa barua pepe.
  • GIF zilizohuishwa zinaweza kuwa kubwa kwa saizi ya faili kuliko picha tuli kutokana na fremu nyingi zinazohitajika ili kuunda uhuishaji, hakikisha unaziweka vizuri chini ya 1. Mb.

Douglas Karr

Douglas Karr ni CMO ya Fungua MAELEZO na mwanzilishi wa Martech Zone. Douglas amesaidia kampuni nyingi za kuanzisha MarTech zilizofaulu, amesaidia katika bidii inayofaa ya zaidi ya $5 bil katika ununuzi na uwekezaji wa Martech, na anaendelea kusaidia kampuni katika kutekeleza na kuelekeza mikakati yao ya uuzaji na uuzaji kiotomatiki. Douglas ni mtaalamu wa mabadiliko ya kidijitali anayetambulika kimataifa na mtaalam wa MarTech na spika. Douglas pia ni mwandishi aliyechapishwa wa mwongozo wa Dummie na kitabu cha uongozi wa biashara.

Related Articles

Rudi kwenye kifungo cha juu
karibu

Adblock Imegunduliwa

Martech Zone inaweza kukupa maudhui haya bila gharama kwa sababu tunachuma mapato ya tovuti yetu kupitia mapato ya matangazo, viungo vya washirika na ufadhili. Tutashukuru ikiwa ungeondoa kizuizi chako cha matangazo unapotazama tovuti yetu.