Sähköpostimarkkinointi ja automaatio

Kuinka käyttää korkearesoluutioisia kuvia verkkokalvon näytöille HTML-sähköpostissasi

Retina-näyttö on markkinointitermi, jota käyttää omena kuvaamaan korkearesoluutioista näyttöä, jonka pikselitiheys on tarpeeksi korkea, jotta ihmissilmä ei pysty erottamaan yksittäisiä pikseleitä tyypillisellä katseluetäisyydellä. Verkkokalvonäytön pikselitiheys on tyypillisesti 300 pikseliä tuumalla (ppi) tai suurempi, mikä on huomattavasti korkeampi kuin tavallinen näyttö, jonka pikselitiheys on 72 ppi.

Retina-näytöt ovat nyt melko yleisiä näytöissä, kannettavissa tietokoneissa, mobiililaitteissa ja tableteissa. Monet valmistajat tarjoavat nyt korkearesoluutioisia näyttöjä, joiden pikselitiheys vastaa tai ylittää Applen Retina-näyttöjen pikselitiheyden.

CSS näyttää korkearesoluutioisen kuvan Retina-näytölle

Voit käyttää seuraavaa CSS-koodia korkearesoluutioisen kuvan lataamiseen Retina-näyttöä varten. Tämä koodi tunnistaa laitteen pikselitiheyden ja lataa kuvan @2x pääte Retina-näytöille, kun samalla ladataan vakioresoluutioinen kuva muille näytöille.

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

Toinen lähestymistapa on käyttää vektorigrafiikkaa tai SVG kuvia, jotka voidaan skaalata mihin tahansa resoluutioon laadun heikkenemättä. Tässä on esimerkki:

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

Tässä esimerkissä SVG-koodi upotetaan suoraan HTML-sähköpostiin käyttämällä <svg> tag. The viewBox attribuutti määrittää SVG-kuvan mitat, kun taas xmlns attribuutti määrittää SVG:n XML-nimiavaruuden.

- max-width omaisuus on asetettu div elementti varmistaaksesi, että SVG-kuva skaalautuu automaattisesti käytettävissä olevaan tilaan sopivaksi, tässä tapauksessa enintään 300 pikseliä. Tämä on paras käytäntö sen varmistamiseksi, että SVG-kuvat näkyvät oikein kaikissa laitteissa ja sähköpostiohjelmissa.

Huomautus: SVG-tuki voi vaihdella sähköpostiohjelmasta riippuen, joten on tärkeää testata sähköpostisi useilla asiakaskoneilla varmistaaksesi, että SVG-kuva näkyy oikein.

Toinen tapa koodata HTML-sähköpostiviestejä Retina-näytöille on käyttää srcset. Käyttämällä srcset-attribuuttia voit tarjota korkearesoluutioisia kuvia Retina-näytöille ja varmistaa samalla, että kuvat ovat oikean kokoisia alhaisemman resoluution laitteille.

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

Tässä esimerkissä srcset attribuutti tarjoaa kaksi kuvalähdettä: image.jpg laitteille, joiden resoluutio on 600 pikseliä tai vähemmän, ja image@2x.jpg laitteille, joiden resoluutio on 1200 pikseliä tai enemmän. The 600w ja 1200w kuvaajat määrittävät kuvien koon pikseleinä, mikä auttaa selainta määrittämään, mikä kuva ladataan laitteen resoluution perusteella.

Kaikki sähköpostiohjelmat eivät tue srcset attribuutti. Tuen taso srcset voi vaihdella suuresti sähköpostiohjelmasta riippuen, joten on tärkeää testata sähköpostisi useilla asiakasohjelmilla varmistaaksesi, että kuvat näkyvät oikein.

HTML sähköpostissa oleville kuville optimoitu verkkokalvon näytöille

on mahdollista koodata reagoiva HTML-sähköposti, joka näyttää kuvan oikein verkkokalvon näytöille optimoidulla resoluutiolla. Näin:

  1. Luo korkearesoluutioinen kuva, joka on kaksinkertainen sähköpostissa näkyvään todelliseen kuvaan verrattuna. Jos esimerkiksi haluat näyttää 300×200 kuvan, luo 600×400 kuva.
  2. Tallenna korkearesoluutioinen kuva -painikkeella @2x pääte. Esimerkiksi, jos alkuperäinen kuvasi on image.png, tallenna korkearesoluutioinen versio nimellä kuva@2x.png.
  3. Käytä HTML-sähköpostikoodissasi seuraavaa koodia näyttääksesi kuvan:
<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)]> on ehdollinen kommentti, jota käytetään kohdistamaan tiettyihin Microsoft Outlookin versioihin, jotka käyttävät Microsoft Wordia HTML-sähköpostien hahmontamiseen. Microsoft Wordin HTML-renderöintikone voi olla hyvin erilainen kuin muiden sähköpostiohjelmien ja verkkoselaimien, joten se vaatii usein erityiskäsittelyä. The

(gte mso 9) ehto tarkistaa, onko Microsoft Office -versio suurempi tai yhtä suuri kuin 9, mikä vastaa Microsoft Office 2000:ta. |(IE) kunto tarkistaa, onko asiakas Internet Explorer, jota Microsoft Outlook usein käyttää.

HTML-sähköposti Retina-näytön optimoiduilla kuvilla

Tässä on esimerkki responsiivisesta HTML-sähköpostikoodista, joka näyttää kuvan verkkokalvon näytöille optimoidulla resoluutiolla:

<!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-näytön kuvavinkkejä

Tässä on joitain lisävinkkejä HTML-sähköpostien optimointiin Retina-näytöille optimoiduille kuville:

  • Varmista, että kuvatunnisteet sisältävät aina käytön alt tekstiä, joka tarjoaa kuvan kontekstin.
  • Optimoi kuvat verkkoa varten pienentääksesi tiedostokokoa kuvanlaadusta tinkimättä. Tämä voi sisältää käytön kuvan pakkaus työkaluja, vähentää kuvassa käytettyjen värien määrää ja muuttaa kuvan kokoa sen optimaalisiin mittoihin ennen sen lähettämistä sähköpostiin.
  • Vältä suuria taustakuvia, jotka voivat hidastaa sähköpostin latausaikoja.
  • Animoidut GIF-tiedostot voivat olla tiedostokooltaan suurempia kuin staattiset kuvat, koska animaation luomiseen tarvitaan useita kehyksiä. Muista pitää ne selvästi alle 1 Mb.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.