E-mail marketing i automatizacija

Kako koristiti slike visoke rezolucije za Retina displeje u vašoj HTML e-pošti

Retina displej je marketinški termin koji koristi jabuka da opišem ekran visoke rezolucije koji ima dovoljno veliku gustinu piksela da ljudsko oko nije u stanju da razlikuje pojedinačne piksele na tipičnoj udaljenosti gledanja. Retina ekran obično ima gustinu piksela od 300 piksela po inču (ppi) ili više, što je znatno više od standardnog ekrana sa gustinom piksela od 72 ppi.

Retina displeji su sada prilično popularni za ekrane, laptopove, mobilne uređaje i tablete. Mnogi proizvođači sada nude displeje visoke rezolucije sa gustinom piksela koja odgovara ili prevazilazi one Apple Retina displeja.

CSS za prikaz slike veće rezolucije za Retina ekran

Možete koristiti sljedeći CSS kod za učitavanje slike visoke rezolucije za Retina ekran. Ovaj kod detektuje gustinu piksela uređaja i učitava sliku @2x sufiks za Retina ekrane, dok učitava sliku standardne rezolucije za druge ekrane.

@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 pristup je korištenje vektorske grafike ili SVG slike, koje se mogu skalirati na bilo koju rezoluciju bez gubitka kvaliteta. Evo primjera:

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

U ovom primjeru, SVG kod je ugrađen direktno u HTML e-poruku pomoću <svg> tag. The viewBox atribut definira dimenzije SVG slike, dok je xmlns atribut specificira XML imenski prostor za SVG.

The max-width nekretnina je postavljena na div element kako bi se osiguralo da se SVG slika automatski mijenja kako bi se uklopila u raspoloživi prostor, do maksimalne širine od 300 piksela u ovom slučaju. Ovo je najbolja praksa za osiguranje da se SVG slike pravilno prikazuju na svim uređajima i klijentima e-pošte.

Bilješka: SVG podrška može varirati ovisno o klijentu e-pošte, pa je važno da testirate svoju e-poštu na više klijenata kako biste bili sigurni da se SVG slika prikazuje ispravno.

Drugi način kodiranja HTML e-pošte za Retina ekrane je korištenje srcset. Korišćenje atributa srcset omogućava vam da obezbedite slike visoke rezolucije za Retina ekrane, istovremeno osiguravajući da su slike odgovarajuće veličine za uređaje niže rezolucije.

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

U ovom primjeru, srcset atribut pruža dva izvora slike: image.jpg za uređaje sa rezolucijom od 600 piksela ili manje, i image@2x.jpg za uređaje sa rezolucijom od 1200 piksela ili više. The 600w i 1200w deskriptori određuju veličinu slika u pikselima, što pomaže pretraživaču da odredi koju sliku da preuzme na osnovu rezolucije uređaja.

Ne podržavaju svi klijenti e-pošte srcset atribut. Nivo podrške za srcset može uvelike varirati ovisno o klijentu e-pošte, tako da je važno testirati svoje e-poruke na više klijenata kako biste bili sigurni da su slike pravilno prikazane.

HTML za slike u e-pošti optimiziran za Retina displeje

moguće je kodirati responzivnu HTML e-poštu koja će pravilno prikazati sliku u rezoluciji optimizovanoj za retina displeje. Evo kako:

  1. Napravite sliku visoke rezolucije koja je dvostruko veća od stvarne slike koju želite da prikažete u e-poruci. Na primjer, ako želite da prikažete sliku veličine 300×200, kreirajte sliku od 600×400.
  2. Sačuvajte sliku visoke rezolucije pomoću @2x sufiks. Na primjer, ako je vaša originalna slika image.png, sačuvajte verziju visoke rezolucije kao image@2x.png.
  3. U svom HTML kodu e-pošte koristite sljedeći kod 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 uslovni komentar koji se koristi za ciljanje određenih verzija programa Microsoft Outlook, koji koristi Microsoft Word za prikazivanje HTML e-poruka. Microsoft Wordov HTML mehanizam za prikazivanje može se prilično razlikovati od drugih klijenata e-pošte i web pretraživača, tako da često zahtijeva posebno rukovanje. The

(gte mso 9) uvjet provjerava da li je verzija Microsoft Officea veća ili jednaka 9, što odgovara Microsoft Office 2000. |(IE) uvjet provjerava da li je klijent Internet Explorer, koji često koristi Microsoft Outlook.

HTML e-pošta sa optimizovanim slikama Retina Display

Evo primjera responzivnog HTML koda e-pošte koji prikazuje sliku u rezoluciji optimiziranoj za ekrane mrežnice:

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

Retina Display Savjeti za sliku

Evo nekoliko dodatnih savjeta o optimizaciji vaših HTML e-poruka za slike optimizirane za Retina displeje:

  • Budite sigurni da vaše oznake slika uvijek uključuju korištenje alt tekst za pružanje konteksta za sliku.
  • Optimizirajte slike za web kako biste smanjili veličinu datoteke bez ugrožavanja kvaliteta slike. Ovo može uključivati ​​korištenje kompresija slike alate, smanjujući broj boja koje se koriste na slici i mijenjajući veličinu slike na njene optimalne dimenzije prije nego što je otpremite na e-poštu.
  • Izbjegavajte velike pozadinske slike koje mogu usporiti vrijeme učitavanja e-pošte.
  • Animirani GIF-ovi mogu biti veće veličine datoteke od statičnih slika zbog više okvira potrebnih za kreiranje animacije, pazite da ih držite ispod 1 Mb.

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desetinama uspješnih MarTech startupova, pomogao je u dubinskom pregledu od preko 5 milijardi dolara u Martechovim akvizicijama i investicijama, te nastavlja da pomaže kompanijama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak za digitalnu transformaciju i MarTech stručnjak i govornik. Douglas je također objavljeni autor Dummie's vodiča i knjige o poslovnom liderstvu.

Vezani članci

Nazad na vrh dugmeta
blizu

Adblock otkriven

Martech Zone je u mogućnosti da vam pruži ovaj sadržaj bez ikakvih troškova jer mi unovčavamo našu stranicu putem prihoda od oglasa, partnerskih veza i sponzorstava. Bili bismo zahvalni ako biste uklonili svoj blokator oglasa dok gledate našu web stranicu.