Margaíocht Ríomhphoist & Uathoibriú

Conas Íomhánna Ardtaifigh a Úsáid le haghaidh Taispeántais Reitine i Do Ríomhphost HTML

Is téarma margaíochta é taispeáint reitine a úsáideann Apple chun cur síos a dhéanamh ar thaispeántas ardtaifigh a bhfuil dlús picteilín ard go leor aige nach féidir leis an tsúil dhaonna idirdhealú a dhéanamh idir picteilíní aonair ag achar féachana tipiciúil. Is gnách go mbíonn dlús picteilín 300 picteilín an orlach ag taispeáint reitine (ppi) nó níos airde, atá i bhfad níos airde ná taispeáint chaighdeánach le dlús picteilín de 72 ppi.

Tá taispeántais reitine go leor príomhshrutha anois le haghaidh taispeántais, ríomhairí glúine, gléasanna soghluaiste agus táibléad. Tairgeann go leor déantúsóirí taispeántais ardtaifigh anois le dlúis picteilín a mheaitseálann nó a sháraíonn iad siúd de thaispeántais reitine Apple.

CSS Chun Íomhá Ardtaifeach a Thaispeáint Do Thaispeántas Reitine

Is féidir leat an cód CSS seo a leanas a úsáid chun íomhá ardtaifigh a luchtú le haghaidh taispeáint reitine. Aimsíonn an cód seo dlús picteilín an ghléis agus lódálann sé an íomhá leis an @2x iarmhír do thaispeántais Reitine, agus an íomhá réitigh chaighdeánaigh á luchtú le haghaidh taispeántais eile.

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

Cur chuige eile is ea grafaic veicteora a úsáid nó SVG íomhánna, is féidir a scála go dtí aon taifeach gan chailliúint cáilíochta. Seo sampla:

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

Sa sampla seo, tá an cód SVG leabaithe go díreach sa ríomhphost HTML ag baint úsáide as an <svg> tag. Tá an viewBox sainmhíníonn tréith toisí an íomhá SVG, agus an xmlns sonraíonn aitreabúid an t-ainmspás XML do SVG.

An max-width tá maoin socraithe ar an div eilimint chun a chinntiú go scálaí an íomhá SVG go huathoibríoch a d'oirfeadh an spás atá ar fáil, suas go dtí leithead uasta de 300px sa chás seo. Is cleachtas is fearr é seo chun a chinntiú go dtaispeántar íomhánna SVG i gceart ar gach feiste agus cliant ríomhphoist.

Nóta: Is féidir le tacaíocht SVG athrú ag brath ar an gcliant ríomhphoist, mar sin tá sé tábhachtach do r-phost a thástáil ar chliaint iolracha chun a chinntiú go bhfuil an íomhá SVG ar taispeáint i gceart.

Bealach eile chun ríomhphoist HTML a chódú le haghaidh taispeántais Reitine ná úsáid a bhaint as srcset. Trí úsáid a bhaint as an aitreabúid srcset is féidir leat íomhánna ardtaifigh a sholáthar do thaispeántais Reitine agus ag an am céanna a chinntiú go bhfuil na híomhánna den mhéid ceart le haghaidh gléasanna ísealtaifigh.

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

Sa sampla seo, tá an srcset Soláthraíonn tréith dhá fhoinse íomhá: image.jpg le haghaidh feistí a bhfuil taifeach acu arb ionann é agus 600 picteilín nó ar lú é ná sin, agus image@2x.jpg le haghaidh feistí le taifeach 1200 picteilín nó níos mó. Tá an 600w agus 1200w sonraíonn tuairisceoirí méid na n-íomhánna i bpicteilíní, rud a chabhraíonn leis an mbrabhsálaí a chinneadh cén íomhá atá le híoslódáil bunaithe ar thaifeach an ghléis.

Ní thacaíonn gach cliant ríomhphoist leis an srcset tréith. An leibhéal tacaíochta do srcset a athrú go forleathan ag brath ar an gcliant ríomhphoist, mar sin tá sé tábhachtach a thástáil do r-phoist ar chliaint éagsúla chun a chinntiú go bhfuil na híomhánna ar taispeáint i gceart.

HTML Le haghaidh Íomhánna i R-phost Optamaithe Do Thaispeántais Reitine

is féidir ríomhphost freagrúil HTML a chódú a thaispeánfaidh íomhá i gceart ag taifeach atá optamaithe le haghaidh taispeántais reitine. Seo conas:

  1. Cruthaigh íomhá ardtaifigh atá faoi dhó ar mhéid na híomhá iarbhír is mian leat a thaispeáint sa ríomhphost. Mar shampla, más mian leat íomhá 300×200 a thaispeáint, cruthaigh íomhá 600×400.
  2. Sábháil an íomhá ardtaifigh leis an @2x iarmhír. Mar shampla, má tá do íomhá bunaidh image.png, sábháil an leagan ardtaifigh mar íomhá@2x.png.
  3. I do chód ríomhphoist HTML, úsáid an cód seo a leanas chun an íomhá a thaispeáint:
<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)]> is trácht coinníollach é a úsáidtear chun díriú ar leaganacha sonracha de Microsoft Outlook, a úsáideann Microsoft Word chun ríomhphoist HTML a sholáthar. Is féidir le hinneall rindreála HTML Microsoft Word a bheith an-difriúil ó chliaint ríomhphoist agus brabhsálaithe gréasáin eile, mar sin is minic a éilíonn sé láimhseáil speisialta. Tá an

(gte mso 9) seiceálann an riocht an bhfuil leagan Microsoft Office níos mó ná nó cothrom le 9, a fhreagraíonn do Microsoft Office 2000. |(IE) seiceálacha riocht má tá an cliant Internet Explorer, a úsáidtear go minic ag Microsoft Outlook.

Ríomhphost HTML Le Reitine Taispeáin Íomhánna Optamaithe

Seo sampla de chód ríomhphoist freagrúil HTML a thaispeánann íomhá ag taifeach atá optamaithe le haghaidh taispeántais reitine:

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

Leideanna Íomhá Taispeáin Reitine

Seo roinnt leideanna breise maidir le do Ríomhphoist HTML a bharrfheabhsú le haghaidh íomhánna optamaithe le haghaidh taispeántais Reitine:

  • Bí cinnte go n-áiríonn tú úsáid a bhaint as do chlibeanna íomhá i gcónaí alt téacs chun comhthéacs a sholáthar don íomhá.
  • Optamaigh íomhánna don ghréasán chun méid comhaid a laghdú gan cur isteach ar cháilíocht íomhá. Is féidir úsáid a bhaint as seo san áireamh comhbhrú íomhá uirlisí, líon na dathanna a úsáidtear san íomhá a laghdú, agus an íomhá a athrú go dtí na toisí is fearr is féidir sula n-uaslódáil chuig an ríomhphost í.
  • Seachain íomhánna cúlra móra ar féidir leo moill a chur ar amanna lódála ríomhphoist.
  • Is féidir le GIFanna beoite a bheith níos mó i méid comhaid ná íomhánna statacha mar gheall ar na frámaí iolracha a theastaíonn chun an bheochan a chruthú, bí cinnte go gcoimeádtar iad i bhfad faoi 1 Mb.

Douglas Karr

Douglas Karr is CMO de OpenINSIGHTS agus bunaitheoir an Martech Zone. Chuidigh Douglas leis na dosaenacha de ghnólachtaí nuathionscanta MarTech ar éirigh leo, chuidigh sé le dícheall cuí os cionn $5 billiún in éadálacha agus infheistíochtaí Martech, agus leanann sé ag cabhrú le cuideachtaí a gcuid straitéisí díolacháin agus margaíochta a chur i bhfeidhm agus a uathoibriú. Is saineolaí agus cainteoir ar chlaochlú digiteach agus MarTech é Douglas atá aitheanta go hidirnáisiúnta. Is údar foilsithe é Douglas freisin ar threoirleabhar Dummie agus ar leabhar ceannaireachta gnó.

Airteagail gaolmhara

Ar ais go barr an cnaipe
Dún

Braitheadh ​​Adblock

Martech Zone in ann an t-ábhar seo a sholáthar duit gan aon chostas mar go ndéanaimid airgead ar ár suíomh trí ioncam fógraíochta, naisc chleamhnaithe agus urraíochtaí. Bheimis buíoch dá mbainfeá do bhacadóir fógraí agus tú ag féachaint ar ár suíomh.