Marketing i automatizacija putem e-pošte

Kako koristiti slike visoke rezolucije za Retina zaslone u svojoj HTML e-pošti

Retina zaslon je marketinški izraz koji koristi jabuka za opisivanje zaslona visoke razlučivosti koji ima dovoljno visoku gustoću piksela da ljudsko oko ne može razlikovati pojedinačne piksele na tipičnoj udaljenosti gledanja. Retina zaslon obično ima gustoću piksela od 300 piksela po inču (ppi) ili više, što je znatno više od standardnog zaslona s gustoćom piksela od 72 ppi.

Retina zasloni sada su prilično uobičajeni za zaslone, prijenosna računala, mobilne uređaje i tablete. Mnogi proizvođači sada nude zaslone visoke razlučivosti s gustoćom piksela koja odgovara ili premašuje one Appleovih Retina zaslona.

CSS za prikaz slike više rezolucije za Retina zaslon

Možete koristiti sljedeći CSS kod za učitavanje slike visoke rezolucije za Retina zaslon. Ovaj kod detektira gustoću piksela uređaja i učitava sliku s @ 2x sufiks za Retina zaslone, dok učitava sliku standardne razlučivosti 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 pristup je korištenje vektorske grafike ili SVG slike, koje se mogu skalirati na bilo koju rezoluciju bez gubitka kvalitete. 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 izravno u HTML e-poštu pomoću <svg> označiti. The viewBox atribut definira dimenzije SVG slike, dok atribut xmlns atribut specificira XML imenski prostor za SVG.

Korištenje električnih romobila ističe max-width nekretnina je postavljena na div element kako bi se osiguralo da se SVG slika automatski skalira kako bi odgovarala dostupnom prostoru, do maksimalne širine od 300 piksela u ovom slučaju. Ovo je najbolja praksa za osiguravanje ispravnog prikaza SVG slika na svim uređajima i klijentima e-pošte.

Bilješka: Podrška za SVG može se razlikovati ovisno o klijentu e-pošte, stoga je važno testirati svoju e-poštu na više klijenata kako biste bili sigurni da se SVG slika ispravno prikazuje.

Drugi način kodiranja HTML e-pošte za Retina zaslone je korištenje srcset. Korištenje atributa srcset omogućuje vam pružanje slika visoke razlučivosti za Retina zaslone, a istovremeno osigurava da su slike odgovarajuće veličine za uređaje niže razlučivosti.

<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 s razlučivošću od 600 piksela ili manje, i image@2x.jpg za uređaje razlučivosti 1200 piksela ili više. The 600w i 1200w deskriptori određuju veličinu slika u pikselima, što pomaže pregledniku da odredi koju će sliku preuzeti na temelju rezolucije uređaja.

Ne podržavaju svi klijenti e-pošte srcset atribut. Razina podrške za srcset može uvelike varirati ovisno o klijentu e-pošte, stoga je važno testirati svoju e-poštu na više klijenata kako biste bili sigurni da se slike ispravno prikazuju.

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

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

  1. Izradite sliku visoke razlučivosti koja je dvostruko veća od stvarne slike koju želite prikazati u e-poruci. Na primjer, ako želite prikazati sliku 300×200, izradite sliku 600×400.
  2. Spremite sliku visoke razlučivosti pomoću @ 2x sufiks. Na primjer, ako je vaša izvorna slika image.png, spremite verziju visoke razlučivosti kao slika@2x.png.
  3. U svom HTML kodu e-pošte upotrijebite 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 uvjetni komentar koji se koristi za ciljanje određenih verzija Microsoft Outlooka, koji koristi Microsoft Word za prikaz HTML e-pošte. Mehanizam za iscrtavanje HTML-a Microsoft Worda može se prilično razlikovati od drugih klijenata e-pošte i web-preglednika, tako da često zahtijeva posebno rukovanje. The

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

HTML e-pošta s optimiziranim slikama za Retina zaslon

Evo primjera responzivnog HTML koda e-pošte koji prikazuje sliku u razlučivosti optimiziranoj za retina zaslone:

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

Savjeti za sliku na retina zaslonu

Evo nekoliko dodatnih savjeta o optimizaciji vaše HTML e-pošte za slike optimizirane za Retina zaslone:

  • 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 kvalitete slike. To može uključivati ​​korištenje kompresija slike alate, smanjenje broja boja korištenih na slici i promjenu veličine slike na njezine optimalne dimenzije prije učitavanja u e-poštu.
  • Izbjegavajte velike pozadinske slike koje mogu usporiti učitavanje e-pošte.
  • Animirani GIF-ovi mogu biti veći u veličini datoteke od statičnih slika zbog višestrukih okvira potrebnih za izradu animacije, pazite da budu ispod 1 Mb.

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.