Retpoŝta Merkatado kaj Aŭtomatigo

Kiel Uzi Alt-Rezoluciajn Bildojn por Retinaj Montraĵoj En Via HTML-Retpoŝto

Retina ekrano estas merkatika termino uzata de pomo priskribi alt-rezolucian ekranon kiu havas pikselan densecon sufiĉe altan ke la homa okulo estas nekapabla distingi individuajn pikselojn ĉe tipa rigarddistanco. Retina ekrano kutime havas pikselan densecon de 300 pikseloj je colo (Ppi) aŭ pli alta, kiu estas signife pli alta ol norma ekrano kun piksela denseco de 72 ppi.

Retinaj ekranoj nun estas sufiĉe ĉefaj por ekranoj, tekkomputiloj, porteblaj aparatoj kaj tablojdoj. Multaj produktantoj nun ofertas alt-rezoluciajn ekranojn kun pikselaj densecoj kiuj egalas aŭ superas tiujn de la Retinaj ekranoj de Apple.

CSS Por Montri Pli Altan Rezolucian Bildon Por Retina Ekrano

Vi povas uzi la jenan CSS-kodon por ŝargi alt-rezolucian bildon por Retina ekrano. Ĉi tiu kodo detektas la pikselan densecon de la aparato kaj ŝarĝas la bildon per la @2x sufikso por Retinaj ekranoj, dum ŝarĝo de la norma rezolucia bildo por aliaj ekranoj.

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

Alia aliro estas uzi vektorajn grafikojn aŭ SVG bildoj, kiuj povas grimpi al ajna rezolucio sen perdi kvaliton. Jen ekzemplo:

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

En ĉi tiu ekzemplo, la SVG-kodo estas enigita rekte en la HTML-retpoŝton uzante la <svg> etikedo. La viewBox atributo difinas la dimensiojn de la SVG-bildo, dum la xmlns atributo specifas la XML-nomspacon por SVG.

la max-width posedaĵo estas metita sur la div elemento por certigi, ke la SVG-bildo skalas aŭtomate por konveni al la disponebla spaco, ĝis maksimuma larĝo de 300px en ĉi tiu kazo. Ĉi tio estas plej bona praktiko por certigi, ke SVG-bildoj estas montritaj ĝuste en ĉiuj aparatoj kaj retpoŝtaj klientoj.

Noto: SVG-subteno povas varii depende de la retpoŝta kliento, do gravas testi vian retpoŝton ĉe pluraj klientoj por certigi, ke la SVG-bildo estas montrita ĝuste.

Alia maniero kodi HTML-retpoŝtojn por Retinaj ekranoj estas uzi srcset. Uzi la srcset-atributon ebligas al vi provizi alt-rezoluciajn bildojn por retinaj ekranoj, certigante, ke la bildoj estas taŭge grandigitaj por pli malaltaj rezoluciaj aparatoj.

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

En ĉi tiu ekzemplo, la srcset atributo disponigas du bildfontojn: image.jpg por aparatoj kun rezolucio de 600 pikseloj aŭ malpli, kaj image@2x.jpg por aparatoj kun rezolucio de 1200 pikseloj aŭ pli. La 600w kaj 1200w priskribiloj precizigas la grandecon de la bildoj en pikseloj, kio helpas la retumilon determini kiun bildon elŝuti surbaze de la rezolucio de la aparato.

Ne ĉiuj retpoŝtaj klientoj subtenas la srcset atributo. La nivelo de subteno por srcset povas varii vaste depende de la retpoŝta kliento, do gravas testi viajn retpoŝtojn ĉe pluraj klientoj por certigi, ke la bildoj estas ĝuste montritaj.

HTML Por Bildoj En Retpoŝto Optimumigita Por Retinaj Ekranaĵoj

eblas kodi respondeman HTML-retpoŝton, kiu ĝuste montros bildon je rezolucio optimumigita por retinaj ekranoj. Jen kiel:

  1. Kreu alt-rezolucian bildon, kiu estas duobla ol la reala bildo, kiun vi volas montri en la retpoŝto. Ekzemple, se vi volas montri bildon de 300×200, kreu bildon de 600×400.
  2. Konservu la alt-rezolucian bildon per la @2x sufikso. Ekzemple, se via originala bildo estas image.png, konservu la alt-rezolucian version kiel bildo@2x.png.
  3. En via HTML-retpoŝta kodo, uzu la sekvan kodon por montri la bildon:
<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)]> estas kondiĉa komento, kiu estas uzata por celi specifajn versiojn de Microsoft Outlook, kiu uzas Microsoft Word por redoni HTML-retpoŝtojn. La HTML-bildiga motoro de Microsoft Word povas esti sufiĉe malsama de aliaj retpoŝtaj klientoj kaj retumiloj, do ĝi ofte postulas specialan uzadon. La

(gte mso 9) kondiĉo kontrolas ĉu la Microsoft Office-versio estas pli granda ol aŭ egala al 9, kio respondas al Microsoft Office 2000. La |(IE) kondiĉo kontrolas ĉu la kliento estas Internet Explorer, kiu estas ofte uzata de Microsoft Outlook.

HTML Retpoŝto Kun Retina Ekrano Optimumigitaj Bildoj

Jen ekzemplo de respondema HTML-retpoŝta kodo, kiu montras bildon kun rezolucio optimumigita por retinaj ekranoj:

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

Retino Montri Bildo Konsiletoj

Jen kelkaj pliaj konsiletoj pri optimumigo de viaj HTML-Retpoŝtoj por bildoj optimumigitaj por Retinaj ekranoj:

  • Nepre ĉiam viaj bildaj etikedoj inkluzivas uzadon alt teksto por provizi kuntekston por la bildo.
  • Optimumigu bildojn por la reto por redukti dosiergrandecon sen kompromiti bildkvaliton. Ĉi tio povas inkluzivi uzadon bildkunpremo iloj, reduktante la nombron da koloroj uzataj en la bildo, kaj regrandigi la bildon al ĝiaj optimumaj dimensioj antaŭ alŝuti ĝin al la retpoŝto.
  • Evitu grandajn fonbildojn, kiuj povas malrapidigi retpoŝtajn ŝarĝtempojn.
  • Viglaj GIF-oj povas esti pli grandaj en dosiergrandeco ol senmovaj bildoj pro la multoblaj kadroj necesaj por krei la kuraĝigon, nepre konservu ilin bone sub 1. Mb.

Douglas Karr

Douglas Karr estas CMO de OpenINSIGHTS kaj la fondinto de la Martech Zone. Douglas helpis dekduojn da sukcesaj MarTech-noventreprenoj, helpis en la konvena diligento de pli ol $ 5 miliardoj en Martech-akiroj kaj investoj, kaj daŭre helpas firmaojn en efektivigado kaj aŭtomatigo de siaj vendaj kaj merkatigstrategioj. Douglas estas internacie agnoskita cifereca transformo kaj MarTech-eksperto kaj parolanto. Douglas ankaŭ estas publikigita verkinto de la gvidisto de Dummie kaj komerca gvidadlibro.

rilataj Artikoloj

Reen al la supra butono
Fermi

Adbloko Detektita

Martech Zone kapablas provizi al vi ĉi tiun enhavon senkoste ĉar ni monetigas nian retejon per reklamaj enspezoj, filiaj ligiloj kaj sponsorado. Ni dankus se vi forigus vian reklamblokilon dum vi rigardas nian retejon.