El. pašto rinkodara ir automatizavimas

Kaip naudoti didelės raiškos vaizdus tinklainės ekranams savo HTML el

Tinklainės ekranas yra rinkodaros terminas, kurį naudoja Apple apibūdinti didelės raiškos ekraną, kurio pikselių tankis yra pakankamai didelis, kad žmogaus akis negalėtų atskirti atskirų pikselių įprastu žiūrėjimo atstumu. Tinklainės ekrano pikselių tankis paprastai yra 300 pikselių colyje (ppi,) arba didesnis, o tai yra žymiai didesnis nei standartinis ekranas, kurio pikselių tankis yra 72 ppi.

Retina ekranai dabar yra gana plačiai naudojami ekranuose, nešiojamuosiuose kompiuteriuose, mobiliuosiuose įrenginiuose ir planšetiniuose kompiuteriuose. Daugelis gamintojų dabar siūlo didelės raiškos ekranus, kurių pikselių tankis atitinka arba viršija Apple Retina ekranų tankį.

CSS, kad būtų rodomas didesnės raiškos vaizdas tinklainės ekranui

Norėdami įkelti didelės raiškos vaizdą tinklainės ekranui, galite naudoti šį CSS kodą. Šis kodas aptinka įrenginio pikselių tankį ir įkelia vaizdą su @ 2x Retina ekranų priesaga, įkeliant standartinės raiškos vaizdą kitiems ekranams.

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

Kitas būdas yra naudoti vektorinę grafiką arba SVG vaizdų, kuriuos galima keisti iki bet kokios skiriamosios gebos neprarandant kokybės. Štai pavyzdys:

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

Šiame pavyzdyje SVG kodas įterpiamas tiesiai į HTML el. laišką naudojant el <svg> žyma. viewBox atributas apibrėžia SVG vaizdo matmenis, o xmlns atributas nurodo SVG XML vardų erdvę.

Šios max-width nuosavybė nustatyta div elementas, užtikrinantis, kad SVG vaizdo mastelis automatiškai atitiktų turimą erdvę, šiuo atveju ne daugiau kaip 300 pikselių. Tai geriausia praktika siekiant užtikrinti, kad SVG vaizdai būtų tinkamai rodomi visuose įrenginiuose ir el. pašto programose.

Pastaba: SVG palaikymas gali skirtis priklausomai nuo el. pašto programos, todėl svarbu išbandyti el. paštą keliose programose, kad įsitikintumėte, jog SVG vaizdas rodomas tinkamai.

Kitas būdas koduoti HTML el. laiškus Retina ekranams yra naudoti srcset. Naudodami atributą srcset galite teikti didelės raiškos vaizdus Retina ekranams ir užtikrinti, kad vaizdai būtų tinkamo dydžio mažesnės skyros įrenginiams.

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

Šiame pavyzdyje srcset atributas pateikia du vaizdo šaltinius: image.jpg prietaisams, kurių skiriamoji geba yra 600 pikselių ar mažesnė, ir image@2x.jpg prietaisams, kurių skiriamoji geba yra 1200 pikselių ar daugiau. The 600w ir 1200w deskriptoriai nurodo vaizdų dydį pikseliais, o tai padeda naršyklei nustatyti, kurį vaizdą atsisiųsti pagal įrenginio skiriamąją gebą.

Ne visos el. pašto programos palaiko srcset atributas. Paramos lygis srcset gali labai skirtis priklausomai nuo el. pašto programos, todėl svarbu išbandyti el. laiškus keliose programose, kad įsitikintumėte, jog vaizdai rodomi tinkamai.

HTML vaizdams el. paštu, optimizuotas tinklainės ekranams

galima užkoduoti atsakingą HTML el. laišką, kuris tinkamai parodys vaizdą tinklainės ekranams optimizuota raiška. Štai kaip:

  1. Sukurkite didelės raiškos vaizdą, kuris yra dvigubai didesnis už tikrąjį vaizdą, kurį norite rodyti el. laiške. Pavyzdžiui, jei norite rodyti 300 × 200 vaizdą, sukurkite 600 × 400 vaizdą.
  2. Išsaugokite didelės raiškos vaizdą naudodami @ 2x priesaga. Pavyzdžiui, jei jūsų originalus vaizdas yra image.png, išsaugokite didelės raiškos versiją kaip vaizdas@2x.png.
  3. Savo HTML el. pašto kode naudokite šį kodą, kad būtų rodomas vaizdas:
<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)]> yra sąlyginis komentaras, naudojamas konkrečioms „Microsoft Outlook“ versijoms, kuri naudoja „Microsoft Word“ HTML el. laiškams pateikti. „Microsoft Word“ HTML atvaizdavimo variklis gali labai skirtis nuo kitų el. pašto programų ir žiniatinklio naršyklių, todėl dažnai reikia ypatingo tvarkymo. The

(gte mso 9) sąlyga patikrina, ar „Microsoft Office“ versija yra didesnė arba lygi 9, o tai atitinka „Microsoft Office 2000“. |(IE) būsena patikrina, ar klientas yra „Internet Explorer“, kurį dažnai naudoja „Microsoft Outlook“.

HTML el. paštas su tinklainės ekrano optimizuotais vaizdais

Štai interaktyvaus HTML el. pašto kodo, kuriame vaizdas rodomas tinklainės ekranams optimizuota skyra, pavyzdys:

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

Tinklainės ekrano vaizdo patarimai

Štai keli papildomi patarimai, kaip optimizuoti HTML el. laiškus, kad būtų naudojami vaizdai, optimizuoti Retina ekranams:

  • Įsitikinkite, kad jūsų vaizdo žymos visada apima naudojimą alt tekstą, kad pateiktumėte vaizdo kontekstą.
  • Optimizuokite vaizdus žiniatinklyje, kad sumažintumėte failo dydį nepakenkiant vaizdo kokybei. Tai gali apimti naudojimą vaizdo glaudinimas įrankiais, sumažinant vaizde naudojamų spalvų skaičių ir keičiant vaizdo dydį iki optimalių matmenų prieš įkeliant jį į el.
  • Venkite didelių fono vaizdų, kurie gali sulėtinti el. pašto įkėlimo laiką.
  • Animuotų GIF failų dydis gali būti didesnis nei statinių vaizdų, nes animacijai sukurti reikia kelių kadrų. Būtinai laikykite juos gerokai mažesniu nei 1 Mb.

Douglas Karr

Douglas Karr yra BRO OpenINSIGHTS ir įkūrėjas Martech Zone. Douglas padėjo daugybei sėkmingų MarTech pradedančiųjų įmonių, padėjo atlikti daugiau nei 5 mlrd. Douglas yra tarptautiniu mastu pripažintas skaitmeninės transformacijos ir MarTech ekspertas bei pranešėjas. Douglasas taip pat yra paskelbtas Dummie vadovo ir verslo lyderystės knygos autorius.

Susiję straipsniai

Atgal į viršų mygtukas
arti

Aptiktas skelbimų blokas

Martech Zone gali pateikti jums šį turinį nemokamai, nes gauname pajamų iš savo svetainės per pajamas iš skelbimų, filialų nuorodas ir rėmimą. Būtume dėkingi, jei peržiūrėdami mūsų svetainę pašalintumėte skelbimų blokavimo priemonę.