Imèl Maketing & Otomatik

Kijan Pou Sèvi ak Imaj-wo rezolisyon pou montre retin nan imèl HTML ou

Ekspozisyon retin se yon tèm maketing itilize pa Apple dekri yon ekspozisyon wo-rezolisyon ki gen yon dansite pixel ki wo ase pou je imen an pa kapab distenge piksèl endividyèl yo nan yon distans tipik. Yon ekspozisyon retin anjeneral gen yon dansite pixel 300 piksèl pou chak pous (ppi) oswa pi wo, ki se siyifikativman pi wo pase yon ekspozisyon estanda ak yon dansite pixel nan 72 ppi.

Montre retin yo kounye a se byen endikap pou ekspozisyon, laptops, aparèy mobil, ak tablèt. Anpil manifaktirè kounye a ofri ekspozisyon wo rezolisyon ak dansite pixel ki matche oswa depase sa yo ki nan ekspozisyon Retin Apple la.

CSS pou montre yon imaj rezolisyon ki pi wo pou yon ekspozisyon retin

Ou ka itilize kòd CSS sa a pou chaje yon imaj rezolisyon wo pou yon ekspozisyon Retin. Kòd sa a detekte dansite pixel aparèy la ak chaje imaj la ak la @2x sifiks pou ekspozisyon Retin, pandan y ap chaje imaj rezolisyon estanda pou lòt ekspozisyon.

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

Yon lòt apwòch se sèvi ak grafik vektè oswa SVG imaj, ki ka echèl nan nenpòt rezolisyon san yo pa pèdi bon jan kalite. Men yon egzanp:

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

Nan egzanp sa a, kòd SVG la entegre dirèkteman nan imel HTML la lè l sèvi avèk <svg> tag. La viewBox atribi defini dimansyon yo nan imaj la SVG, pandan y ap la xmlns atribi espesifye espas non XML pou SVG.

Jounal max-width pwopriyete a mete sou la div eleman pou asire ke imaj SVG la echèl otomatikman anfòm espas ki disponib la, jiska yon lajè maksimòm 300px nan ka sa a. Sa a se yon pi bon pratik pou asire ke imaj SVG yo parèt byen sou tout aparèy ak kliyan imel.

Remak: Sipò SVG ka varye selon kliyan imel la, kidonk li enpòtan pou teste imel ou sou plizyè kliyan pou asire ke imaj SVG la parèt byen.

Yon lòt fason pou kode imèl HTML pou montre Retin se itilize srcset. Sèvi ak atribi srcset la pèmèt ou bay imaj segondè rezolisyon pou ekspozisyon Retin pandan y ap asire ke imaj yo byen gwosè pou aparèy ki pi ba rezolisyon yo.

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

Nan egzanp sa a, la srcset atribi bay de sous imaj: image.jpg pou aparèy ki gen yon rezolisyon 600 piksèl oswa mwens, ak image@2x.jpg pou aparèy ki gen yon rezolisyon 1200 piksèl oswa plis. La 600w ak 1200w deskriptè yo presize gwosè imaj yo an piksèl, sa ki ede navigatè a detèmine ki imaj pou telechaje selon rezolisyon aparèy la.

Se pa tout kliyan imel sipòte a srcset atribi. Nivo sipò pou srcset ka varye anpil selon kliyan imel la, kidonk li enpòtan pou teste imel ou sou plizyè kliyan pou asire imaj yo parèt byen.

HTML pou imaj nan imèl optimize pou montre retin

li posib kode yon imèl HTML ki reponn ki pral byen montre yon imaj nan yon rezolisyon optimize pou montre retin. Men ki jan:

  1. Kreye yon imaj-wo rezolisyon ki doub gwosè imaj aktyèl la ou vle montre nan imèl la. Pou egzanp, si ou vle montre yon imaj 300 × 200, kreye yon imaj 600 × 400.
  2. Sove imaj la wo rezolisyon ak la @2x sifiks. Pou egzanp, si imaj orijinal ou se image.png, sove vèsyon an wo rezolisyon kòm image@2x.png.
  3. Nan kòd imel HTML ou a, sèvi ak kòd sa a pou montre imaj la:
<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)]> se yon kòmantè kondisyonèl ki itilize pou vize vèsyon espesifik Microsoft Outlook, ki itilize Microsoft Word pou rann imèl HTML. Motè rann HTML Microsoft Word la ka byen diferan de lòt kliyan imel ak navigatè entènèt, kidonk li souvan mande pou manyen espesyal. La

(gte mso 9) kondisyon tcheke si vèsyon Microsoft Office la pi gran pase oswa egal a 9, ki koresponn ak Microsoft Office 2000. |(IE) kondisyon tcheke si kliyan an se Internet Explorer, ki se souvan itilize pa Microsoft Outlook.

HTML Imèl ak Retin Display Optimize Imaj

Men yon egzanp yon kòd imel HTML reponn ki montre yon imaj nan yon rezolisyon optimize pou ekspozisyon retin:

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

Retin Ekspozisyon Imaj Konsèy

Men kèk konsèy adisyonèl sou optimize Imèl HTML ou pou imaj optimize pou ekspozisyon Retin:

  • Asire ou ke ou toujou gen tags imaj ou yo enkli lè l sèvi avèk alt tèks pou bay yon kontèks pou imaj la.
  • Optimize imaj pou entènèt la pou diminye gwosè dosye san yo pa konpwomèt kalite imaj. Sa ka gen ladann itilize konpresyon imaj zouti, diminye kantite koulè yo itilize nan imaj la, ak redimensionnement imaj la nan dimansyon optimal li anvan yo telechaje li nan imel la.
  • Evite gwo imaj background ki ka ralanti tan chaj imel.
  • GIF anime yo ka pi gwo nan gwosè dosye pase imaj estatik akòz plizyè ankadreman ki nesesè pou kreye animasyon an, asire w ke ou kenbe yo byen anba 1. Mb.

Douglas Karr

Douglas Karr se CMO nan OpenINSIGHTS ak fondatè a nan Martech Zone. Douglas te ede plizyè douzèn demaraj MarTech ki gen siksè, li te ede nan dilijans plis pase $5 milya nan akizisyon ak envestisman Martech, epi li kontinye ede konpayi yo nan mete ann aplikasyon ak otomatize estrateji lavant ak maketing yo. Douglas se yon transfòmasyon dijital entènasyonalman rekonèt ak ekspè MarTech ak oratè. Douglas se tou yon otè pibliye nan yon gid Dummie a ak yon liv lidèchip biznis.

Atik ki gen rapò

Retounen nan bouton tèt
Fèmen

Adblock Detekte

Martech Zone se kapab ba ou kontni sa a gratis paske nou monetize sit nou an atravè revni anons, lyen afilye, ak parennaj. Nou ta apresye si ou ta retire bloke anons ou a pandan w ap gade sit nou an.