Email Marketing u Awtomazzjoni

Kif Tuża Stampi b'Riżoluzzjoni Għolja għal Displays tar-Retina Fl-Email HTML Tiegħek

Retina display huwa terminu ta 'kummerċjalizzazzjoni użat minn Apple biex jiddeskrivi display b'riżoluzzjoni għolja li għandu densità ta 'pixels għolja biżżejjed li l-għajn tal-bniedem ma tkunx kapaċi tiddistingwi pixels individwali f'distanza tipika tal-vista. Display retina tipikament ikollu densità ta' pixels ta' 300 pixel kull pulzier (ppi) jew ogħla, li hija ogħla b'mod sinifikanti minn wirja standard b'densità ta 'pixels ta' 72 ppi.

Il-wirjiet tar-retina issa huma pjuttost mainstream għal wirjiet, laptops, tagħmir mobbli, u pilloli. Ħafna manifatturi issa joffru displejs b'riżoluzzjoni għolja b'densitajiet ta 'pixel li jaqblu jew jaqbżu dawk tad-displejs tar-Retina ta' Apple.

CSS Biex Uri Immaġni b'Riżoluzzjoni Ogħla Għal Wiri Retina

Tista 'tuża l-kodiċi CSS li ġej biex tagħbija immaġni b'riżoluzzjoni għolja għal display Retina. Dan il-kodiċi jiskopri d-densità tal-pixels tal-apparat u jgħabbi l-immaġni bl- @ 2x suffiss għall-wirjiet tar-Retina, filwaqt li tgħabbi l-immaġni b'riżoluzzjoni standard għal wirjiet oħra.

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

Approċċ ieħor huwa li tuża grafika vettorjali jew SVG immaġini, li jistgħu skala għal kwalunkwe riżoluzzjoni mingħajr ma jitilfu l-kwalità. Hawn eżempju:

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

F'dan l-eżempju, il-kodiċi SVG huwa inkorporat direttament fl-email HTML bl-użu tal- <svg> tikketta. Il viewBox attribut jiddefinixxi d-dimensjonijiet tal-immaġni SVG, filwaqt li l- xmlns attribut jispeċifika l-ispazju tal-isem XML għal SVG.

il max-width proprjetà hija stabbilita fuq il- div element biex jiġi żgurat li l-immaġni SVG tiskala awtomatikament biex taqbel mal-ispazju disponibbli, sa wisa 'massimu ta' 300px f'dan il-każ. Din hija l-aħjar prattika biex jiġi żgurat li l-immaġini SVG jintwerew sew fuq it-tagħmir u l-klijenti tal-email kollha.

Nota: L-appoġġ SVG jista 'jvarja skont il-klijent tal-email, għalhekk huwa importanti li tittestja l-email tiegħek fuq klijenti multipli biex tiżgura li l-immaġni SVG tintwera kif suppost.

Mod ieħor ta 'kodifikazzjoni ta' emails HTML għal displays Retina huwa li tuża srcset. L-użu tal-attribut srcset jippermettilek li tipprovdi immaġini b'riżoluzzjoni għolja għal wirjiet tar-Retina filwaqt li tiżgura li l-immaġini jkunu ta' daqs xieraq għal apparati b'riżoluzzjoni aktar baxxa.

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

F'dan l - eżempju, il - srcset attribut jipprovdi żewġ sorsi ta 'immaġni: image.jpg għal apparati b'riżoluzzjoni ta' 600 pixel jew inqas, u image@2x.jpg għal apparati b'riżoluzzjoni ta' 1200 pixel jew aktar. Il- 600w u, 1200w deskritturi jispeċifikaw id-daqs tal-immaġini f'pixels, li jgħin lill-browser jiddetermina liema immaġini tniżżel abbażi tar-riżoluzzjoni tal-apparat.

Mhux il-klijenti kollha tal-email jappoġġjaw il- srcset attribut. Il-livell ta' appoġġ għal srcset jistgħu jvarjaw ħafna skont il-klijent tal-email, għalhekk huwa importanti li tittestja l-emails tiegħek fuq klijenti multipli biex tiżgura li l-immaġini jintwerew kif suppost.

HTML Għal Stampi Fl-Email Ottimizzat Għall-Displays tar-Retina

huwa possibbli li tiġi kkodifikata email HTML li tirreaġixxi li turi sew immaġini b'riżoluzzjoni ottimizzata għal wirjiet tar-retina. Ara kif:

  1. Oħloq immaġni b'riżoluzzjoni għolja li tkun id-doppju tad-daqs tal-immaġni attwali li trid turi fl-email. Per eżempju, jekk trid turi immaġni 300×200, oħloq immaġni 600×400.
  2. Issejvja l-immaġni b'riżoluzzjoni għolja bl- @ 2x suffiss. Per eżempju, jekk l-immaġni oriġinali tiegħek hija image.png, Issejvja l-verżjoni b'riżoluzzjoni għolja bħala image@2x.png.
  3. Fil-kodiċi tal-email HTML tiegħek, uża l-kodiċi li ġej biex turi l-immaġni:
<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)]> huwa kumment kondizzjonali li jintuża biex jimmira verżjonijiet speċifiċi ta' Microsoft Outlook, li juża Microsoft Word biex jirrendi emails HTML. Il-magna li tirrendi HTML ta' Microsoft Word tista' tkun pjuttost differenti minn klijenti oħra tal-email u browsers tal-web, għalhekk ħafna drabi teħtieġ immaniġġjar speċjali. Il-

(gte mso 9) il-kundizzjoni tiċċekkja jekk il-verżjoni tal-Microsoft Office hijiex akbar minn jew ugwali għal 9, li tikkorrispondi għal Microsoft Office 2000. |(IE) il-kondizzjoni tiċċekkja jekk il-klijent huwiex Internet Explorer, li ħafna drabi jintuża minn Microsoft Outlook.

Email HTML Bil-Display tar-Retina Stampi Ottimizzati

Hawn eżempju ta' kodiċi ta' email HTML li jirrispondu li juri immaġini b'riżoluzzjoni ottimizzata għal wirjiet tar-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>

Għajnuniet dwar l-Immaġni tal-Wiri tar-Retina

Hawn huma xi suġġerimenti addizzjonali dwar l-ottimizzazzjoni tal-Emails HTML tiegħek għal immaġini ottimizzati għall-wirjiet tar-Retina:

  • Kun żgur li dejjem ikollok it-tikketti tal-immaġni tiegħek jinkludu l-użu alt test biex jipprovdi kuntest għall-immaġni.
  • Ottimizza l-immaġini għall-web biex tnaqqas id-daqs tal-fajl mingħajr ma tikkomprometti l-kwalità tal-immaġni. Dan jista 'jinkludi l-użu kompressjoni tal-immaġni għodod, tnaqqas in-numru ta 'kuluri użati fl-immaġini, u tibdel id-daqs tal-immaġni għad-dimensjonijiet ottimali tagħha qabel ittella' fuq l-email.
  • Evita immaġini kbar fl-isfond li jistgħu jnaqqsu l-ħinijiet tat-tagħbija tal-email.
  • GIFs animati jistgħu jkunu akbar fid-daqs tal-fajl minn immaġini statiċi minħabba l-frejms multipli meħtieġa biex toħloq l-animazzjoni, kun żgur li żżommhom sew taħt 1 Mb.

Douglas Karr

Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

Artikli relatati

Lura għall-buttuna ta 'fuq
Agħlaq

Adblock Individwat

Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.