E-mail marketing és automatizálás

Nagy felbontású képek használata Retina-kijelzőkhöz HTML-e-mailben

A Retina display egy marketing kifejezés, amelyet a Apple olyan nagy felbontású kijelző leírására, amelynek a pixelsűrűsége elég nagy ahhoz, hogy az emberi szem ne tudja megkülönböztetni az egyes képpontokat tipikus látótávolságon. A retina kijelző képpontsűrűsége általában 300 pixel hüvelykenként (ppi) vagy magasabb, ami lényegesen magasabb, mint egy 72 ppi pixelsűrűségű szabványos kijelző.

A Retina-kijelzők ma már meglehetősen általánosak a kijelzők, laptopok, mobileszközök és táblagépek esetében. Sok gyártó ma már kínál olyan nagy felbontású kijelzőket, amelyek pixelsűrűsége megegyezik vagy meghaladja az Apple Retina-kijelzőiét.

CSS nagyobb felbontású kép megjelenítéséhez retina kijelzőhöz

A következő CSS-kóddal nagy felbontású képet tölthet be Retina kijelzőhöz. Ez a kód érzékeli az eszköz pixelsűrűségét, és betölti a képet a @2x utótag a Retina kijelzőkhöz, miközben betölti a normál felbontású képet más kijelzőkre.

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

Egy másik megközelítés a vektorgrafika ill SVG képeket, amelyek bármilyen felbontásra méretezhetők a minőség romlása nélkül. Íme egy példa:

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

Ebben a példában az SVG kód közvetlenül a HTML e-mailbe van beágyazva a következővel <svg> címke. Az viewBox attribútum határozza meg az SVG kép méreteit, míg a xmlns attribútum az SVG XML névterét adja meg.

A max-width tulajdonság van beállítva a div elemet annak biztosítására, hogy az SVG-kép automatikusan a rendelkezésre álló helyhez illeszkedjen, ebben az esetben legfeljebb 300 képpont szélességig. Ez egy bevált módszer annak biztosítására, hogy az SVG-képek megfelelően jelenjenek meg minden eszközön és levelezőprogramban.

Jegyzet: Az SVG-támogatás az e-mail klienstől függően változhat, ezért fontos, hogy e-mailjeit több kliensen is tesztelje, hogy megbizonyosodjon arról, hogy az SVG-kép megfelelően jelenik meg.

A HTML e-mailek Retina kijelzőkhöz való kódolásának másik módja a felhasználás srcset. Az srcset attribútum használatával nagy felbontású képeket biztosíthat a Retina kijelzőkhöz, miközben biztosítja, hogy a képek megfelelő méretűek legyenek az alacsonyabb felbontású eszközökhöz.

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

Ebben a példában a srcset Az attribútum két képforrást biztosít: image.jpg 600 pixel vagy annál kisebb felbontású eszközökhöz, és image@2x.jpg 1200 pixel vagy nagyobb felbontású eszközökhöz. A 600w és a 1200w a leírók pixelben határozzák meg a képek méretét, ami segít a böngészőnek eldönteni, hogy az eszköz felbontása alapján melyik képet töltse le.

Nem minden e-mail kliens támogatja a srcset tulajdonság. A támogatás mértéke srcset nagyon eltérő lehet az e-mail klienstől függően, ezért fontos, hogy az e-maileket több kliensen is tesztelje, hogy megbizonyosodjon arról, hogy a képek megfelelően jelennek meg.

HTML e-mailben lévő képekhez Retina kijelzőkre optimalizálva

lehetőség van egy reszponzív HTML e-mail kódolására, amely megfelelően megjeleníti a képet a retina kijelzőkre optimalizált felbontásban. Itt van, hogyan:

  1. Hozzon létre egy nagy felbontású képet, amely kétszer akkora, mint az e-mailben megjeleníteni kívánt tényleges kép. Ha például egy 300×200-as képet szeretne megjeleníteni, hozzon létre egy 600×400-as képet.
  2. Mentse el a nagy felbontású képet a @2x utótag. Például, ha az eredeti kép image.png, mentse el a nagyfelbontású verziót másként kép@2x.png.
  3. HTML e-mail kódjában használja a következő kódot a kép megjelenítéséhez:
<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)]> egy feltételes megjegyzés, amelyet a Microsoft Outlook bizonyos verzióinak megcélzására használnak, amely Microsoft Word használatával jeleníti meg a HTML e-maileket. A Microsoft Word HTML-megjelenítő motorja meglehetősen eltérhet a többi e-mail klienstől és webböngészőtől, ezért gyakran különleges kezelést igényel. A

(gte mso 9) A feltétel ellenőrzi, hogy a Microsoft Office verziója nagyobb vagy egyenlő-e, mint 9, ami megfelel a Microsoft Office 2000-nek. |(IE) állapot ellenőrzi, hogy az ügyfél az Internet Explorer-e, amelyet gyakran használ a Microsoft Outlook.

HTML e-mail Retina megjelenítésre optimalizált képekkel

Íme egy példa egy reszponzív HTML e-mail kódra, amely a képet retina-megjelenítésre optimalizált felbontásban jeleníti meg:

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

Íme néhány további tipp a HTML-e-mailek optimalizálásához a Retina-kijelzőkre optimalizált képekhez:

  • Ügyeljen arra, hogy a képcímkék mindig tartalmazzák a használatát alt szöveget, amely kontextust biztosít a képhez.
  • Optimalizálja a képeket az internetre, hogy csökkentse a fájlméretet a képminőség romlása nélkül. Ez magában foglalhatja a használatát képtömörítés eszközöket, csökkenti a képen használt színek számát, és átméretezi a képet az optimális méretre, mielőtt feltölti az e-mailbe.
  • Kerülje a nagyméretű háttérképeket, amelyek lelassíthatják az e-mailek betöltési idejét.
  • Az animált GIF-ek fájlmérete nagyobb lehet, mint a statikus képek, mivel az animáció létrehozásához több képkocka szükséges. Ügyeljen arra, hogy jóval 1 alatt legyen. Mb.

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.