E-poštno trženje in avtomatizacija

Kako uporabiti slike visoke ločljivosti za zaslone Retina v svojem e-poštnem sporočilu HTML

Zaslon Retina je tržni izraz, ki ga uporablja Apple za opis zaslona z visoko ločljivostjo, ki ima dovolj visoko gostoto slikovnih pik, da človeško oko ne more razlikovati posameznih slikovnih pik na tipični razdalji gledanja. Retina zaslon ima običajno gostoto slikovnih pik 300 slikovnih pik na palec (ppi) ali višje, kar je bistveno višje od standardnega zaslona z gostoto slikovnih pik 72 ppi.

Zasloni Retina so zdaj precej običajni za zaslone, prenosnike, mobilne naprave in tablice. Številni proizvajalci zdaj ponujajo zaslone z visoko ločljivostjo z gostoto slikovnih pik, ki se ujemajo z gostoto slikovnih pik ali presegajo tiste na Applovih zaslonih Retina.

CSS za prikaz slike višje ločljivosti za zaslon Retina

Za nalaganje slike visoke ločljivosti za zaslon Retina lahko uporabite naslednjo kodo CSS. Ta koda zazna gostoto slikovnih pik naprave in naloži sliko z @ 2x pripona za zaslone Retina, pri nalaganju slike standardne ločljivosti za druge zaslone.

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

Drugi pristop je uporaba vektorske grafike oz SVG slike, ki jih je mogoče prilagoditi poljubni ločljivosti brez izgube kakovosti. Tukaj je primer:

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

V tem primeru je koda SVG vdelana neposredno v e-pošto HTML z uporabo <svg> oznaka. The viewBox atribut določa dimenzije slike SVG, medtem ko atribut xmlns podaja imenski prostor XML za SVG.

O max-width nepremičnina je postavljena na div element za zagotovitev, da se slika SVG samodejno prilagodi razpoložljivemu prostoru, v tem primeru do največje širine 300 slikovnih pik. To je najboljša praksa za zagotavljanje, da so slike SVG pravilno prikazane v vseh napravah in e-poštnih odjemalcih.

Opomba: Podpora za SVG se lahko razlikuje glede na e-poštni odjemalec, zato je pomembno, da svojo e-pošto preizkusite na več odjemalcih, da zagotovite, da je slika SVG pravilno prikazana.

Drug način kodiranja e-poštnih sporočil HTML za zaslone Retina je uporaba srcset. Uporaba atributa srcset vam omogoča, da zagotovite slike visoke ločljivosti za zaslone Retina, hkrati pa zagotovite, da so slike ustrezne velikosti za naprave z nižjo ločljivostjo.

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

V tem primeru je srcset atribut ponuja dva vira slike: image.jpg za naprave z ločljivostjo 600 slikovnih pik ali manj in image@2x.jpg za naprave z ločljivostjo 1200 slikovnih pik ali več. The 600w in 1200w deskriptorji določajo velikost slik v slikovnih pikah, kar brskalniku pomaga določiti, katero sliko prenesti glede na ločljivost naprave.

Vsi e-poštni odjemalci ne podpirajo srcset atribut. Raven podpore za srcset se lahko zelo razlikujejo glede na e-poštni odjemalec, zato je pomembno, da svojo e-pošto preizkusite na več odjemalcih, da zagotovite, da so slike pravilno prikazane.

HTML za slike v e-pošti, optimiziran za zaslone Retina

mogoče je kodirati odzivno e-poštno sporočilo HTML, ki bo pravilno prikazalo sliko z ločljivostjo, optimizirano za zaslone mrežnice. Evo kako:

  1. Ustvarite sliko visoke ločljivosti, ki je dvakrat večja od dejanske slike, ki jo želite prikazati v e-pošti. Na primer, če želite prikazati sliko 300 × 200, ustvarite sliko 600 × 400.
  2. Shranite sliko visoke ločljivosti z @ 2x pripona. Na primer, če je vaša izvirna slika image.png, shranite različico visoke ločljivosti kot slika@2x.png.
  3. V svoji e-poštni kodi HTML uporabite naslednjo kodo za prikaz slike:
<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)]> je pogojni komentar, ki se uporablja za ciljanje na določene različice Microsoft Outlooka, ki uporablja Microsoft Word za upodabljanje e-poštnih sporočil HTML. Mehanizem za upodabljanje HTML Microsoft Worda se lahko precej razlikuje od drugih e-poštnih odjemalcev in spletnih brskalnikov, zato pogosto zahteva posebno ravnanje. The

(gte mso 9) pogoj preveri, ali je različica Microsoft Officea večja ali enaka 9, kar ustreza Microsoft Office 2000. |(IE) pogoj preveri, ali je odjemalec Internet Explorer, ki ga pogosto uporablja Microsoft Outlook.

E-pošta HTML z optimiziranimi slikami zaslona Retina

Tu je primer odzivne e-poštne kode HTML, ki prikazuje sliko z ločljivostjo, optimizirano za zaslone 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>

Nasveti za sliko zaslona Retina

Tukaj je nekaj dodatnih namigov o optimizaciji vaših e-poštnih sporočil HTML za slike, optimizirane za zaslone Retina:

  • Prepričajte se, da vaše slikovne oznake vedno vključujejo uporabo alt besedilo, ki zagotavlja kontekst za sliko.
  • Optimizirajte slike za splet, da zmanjšate velikost datoteke brez ogrožanja kakovosti slike. To lahko vključuje uporabo stiskanje slik orodja, zmanjšanje števila uporabljenih barv na sliki in spreminjanje velikosti slike na optimalne dimenzije, preden jo naložite v e-pošto.
  • Izogibajte se velikim slikam v ozadju, ki lahko upočasnijo nalaganje e-pošte.
  • Animirani GIF-i so lahko večji v velikosti datoteke od statičnih slik zaradi več okvirjev, potrebnih za ustvarjanje animacije, poskrbite, da bodo dovolj pod 1 Mb.

Douglas Karr

Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

Povezani članki

Nazaj na vrh
Zapri

Zaznan Adblock

Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.