Hoe om hoë-resolusie-prente te gebruik vir retina-vertonings in u HTML-e-pos

Retina-vertoning is 'n bemarkingsterm wat deur appel om 'n hoë-resolusie-skerm te beskryf wat 'n pixeldigtheid het wat hoog genoeg is dat die menslike oog nie individuele pixels op 'n tipiese kykafstand kan onderskei nie. 'n Retina-skerm het tipies 'n pixeldigtheid van 300 pixels per duim (ppi) of hoër, wat aansienlik hoër is as 'n standaardskerm met 'n pixeldigtheid van 72 ppi.

Retina-skerms is nou redelik hoofstroom vir skerms, skootrekenaars, mobiele toestelle en tablette. Baie vervaardigers bied nou hoë-resolusie-skerms met pixeldigthede wat ooreenstem met of oortref dié van Apple se Retina-skerms.

CSS om 'n hoër resolusie-beeld vir 'n retina-skerm te vertoon

Jy kan die volgende CSS-kode gebruik om 'n hoë-resolusie-prent vir 'n Retina-skerm te laai. Hierdie kode bespeur die toestel se pixeldigtheid en laai die beeld met die @2x agtervoegsel vir Retina-skerms, terwyl die standaardresolusie-beeld vir ander skerms gelaai word.

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

Nog 'n benadering is om vektorgrafika of SVG beelde, wat na enige resolusie kan skaal sonder om kwaliteit te verloor. Hier is 'n voorbeeld:

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

In hierdie voorbeeld word die SVG-kode direk in die HTML-e-pos ingebed deur die <svg> tag. Die viewBox kenmerk definieer die afmetings van die SVG-beeld, terwyl die xmlns kenmerk spesifiseer die XML-naamruimte vir SVG.

Die max-width eiendom is ingestel op die div element om te verseker dat die SVG-beeld outomaties skaal om by die beskikbare spasie te pas, tot 'n maksimum breedte van 300px in hierdie geval. Dit is 'n beste praktyk om te verseker dat SVG-beelde behoorlik op alle toestelle en e-poskliënte vertoon word.

let wel: SVG-ondersteuning kan wissel na gelang van die e-poskliënt, daarom is dit belangrik om jou e-pos op verskeie kliënte te toets om te verseker dat die SVG-prent behoorlik vertoon word.

Nog 'n manier om HTML-e-posse vir Retina-skerms te kodeer, is om te gebruik srcset. Deur die srcset-kenmerk te gebruik, kan jy hoë-resolusie-beelde vir Retina-vertonings verskaf, terwyl jy verseker dat die beelde behoorlik grootte is vir laer-resolusie-toestelle.

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

In hierdie voorbeeld is die srcset kenmerk verskaf twee beeldbronne: image.jpg vir toestelle met 'n resolusie van 600 pixels of minder, en image@2x.jpg vir toestelle met 'n resolusie van 1200 pixels of meer. Die 600w en 1200w beskrywers spesifiseer die grootte van die beelde in pixels, wat die blaaier help om te bepaal watter beeld om af te laai gebaseer op die toestel se resolusie.

Nie alle e-poskliënte ondersteun die srcset kenmerk. Die vlak van ondersteuning vir srcset kan baie verskil afhangende van die e-poskliënt, daarom is dit belangrik om jou e-posse op verskeie kliënte te toets om te verseker dat die beelde behoorlik vertoon word.

HTML vir beelde in e-pos geoptimaliseer vir retina-skerms

dit is moontlik om 'n responsiewe HTML-e-pos te kodeer wat 'n beeld behoorlik sal vertoon teen 'n resolusie wat geoptimaliseer is vir retina-vertonings. Hier is hoe:

1. Skep 'n hoë-resolusie prent wat dubbel die grootte is van die werklike prent wat jy in die e-pos wil vertoon. Byvoorbeeld, as jy 'n 300×200-prent wil vertoon, skep 'n 600×400-prent.
2. Stoor die hoë-resolusie prent met die @2x agtervoegsel. Byvoorbeeld, as jou oorspronklike prent is image.png, stoor die hoë-resolusie weergawe as beeld@2x.png.
3. Gebruik die volgende kode in jou HTML-e-poskode om die prent te vertoon:

<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)]> is 'n voorwaardelike opmerking wat gebruik word om spesifieke weergawes van Microsoft Outlook te teiken, wat Microsoft Word gebruik om HTML-e-posse weer te gee. Microsoft Word se HTML-weergawe-enjin kan heelwat verskil van ander e-poskliënte en webblaaiers, so dit vereis dikwels spesiale hantering. Die (gte mso 9) toestand kontroleer of die Microsoft Office-weergawe groter as of gelyk is aan 9, wat ooreenstem met Microsoft Office 2000. Die |(IE) toestand kontroleer of die kliënt Internet Explorer is, wat dikwels deur Microsoft Outlook gebruik word.

HTML-e-pos met Retina Display Geoptimaliseerde Beelde

Hier is 'n voorbeeld van 'n responsiewe HTML-e-poskode wat 'n beeld vertoon teen 'n resolusie wat geoptimaliseer is vir retina-vertonings:

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

Hier is 'n paar bykomende wenke oor die optimalisering van jou HTML-e-posse vir beelde wat geoptimaliseer is vir Retina-vertonings:

• Maak seker dat jou beeldmerkers altyd die gebruik insluit alt teks om konteks vir die beeld te verskaf.
• Optimaliseer beelde vir die web om lêergrootte te verminder sonder om beeldkwaliteit in te boet. Dit kan die gebruik insluit beeld kompressie gereedskap, verminder die aantal kleure wat in die prent gebruik word, en verander die grootte van die prent na sy optimale afmetings voordat dit na die e-pos opgelaai word.
• Vermy groot agtergrondprente wat e-poslaaitye kan vertraag.
• Geanimeerde GIF's kan groter in lêergrootte as statiese beelde wees as gevolg van die veelvuldige rame wat nodig is om die animasie te skep, maak seker dat jy hulle goed onder 1 hou Mb.