Email Marketing & Automation

Ahoana ny fampiasana sary manana fanapahan-kevitra avo ho an'ny fampisehoana Retina ao amin'ny mailaka HTML anao

Retina display dia teny marketing ampiasain'ny Apple mba hamaritana ny fampisehoana avo lenta izay manana hakitroky avo be ka tsy hain'ny mason'olombelona manavaka ny piksel tsirairay amin'ny halavirana mahazatra. Ny fampiratiana retina dia matetika manana hakitroky 300 piksel isaky ny santimetatra (ppi) na avo kokoa, izay ambony lavitra noho ny fampisehoana mahazatra misy hakitroky ny piksel 72 ppi.

Ny fampiratiana Retina ankehitriny dia tena mahazatra ho an'ny fampisehoana, solosaina finday, fitaovana finday ary takelaka. Maro ny mpanamboatra manolotra fampisehoana avo lenta miaraka amin'ny hakitroky ny piksel mifanandrify na mihoatra ny an'ny Apple Retina displays.

CSS hanehoana sary manapa-kevitra avo kokoa ho an'ny fampisehoana Retina

Azonao atao ny mampiasa ity code CSS manaraka ity mba hampidirana sary avo lenta ho an'ny fampisehoana Retina. Ity kaody ity dia mamantatra ny hakitroky ny fitaovana ary mameno ny sary miaraka amin'ny @2x tovana ho an'ny fampiratiana Retina, raha mametaka ny sary manara-penitra ho an'ny fampisehoana hafa.

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

Ny fomba iray hafa dia ny fampiasana sary vetaveta na SVG sary, izay afaka mirefy amin'ny fanapahan-kevitra rehetra nefa tsy manary kalitao. Ity misy ohatra iray:

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

Amin'ity ohatra ity, ny kaody SVG dia tafiditra mivantana ao amin'ny mailaka HTML amin'ny fampiasana ny <svg> tag ny viewBox Ny toetra dia mamaritra ny refin'ny sary SVG, raha ny xmlns Ny toetra dia mamaritra ny espace XML ho an'ny SVG.

The max-width fananana dia napetraka eo amin'ny div singa mba hahazoana antoka fa mizana ho azy ny sary SVG mba hifanaraka amin'ny habaka misy, hatramin'ny 300px ambony indrindra amin'ity tranga ity. Izany no fomba fanao tsara indrindra mba hahazoana antoka fa ny sary SVG dia aseho tsara amin'ny fitaovana rehetra sy ny mpanjifa mailaka.

Fanamarihana: Ny fanohanana SVG dia mety miovaova arakaraka ny mpanjifa mailaka, noho izany dia zava-dehibe ny fitsapana ny mailakao amin'ny mpanjifa maro mba hahazoana antoka fa ny sary SVG dia aseho tsara.

Fomba iray hafa amin'ny fanoratana mailaka HTML ho an'ny fampisehoana Retina dia ny fampiasana srcset. Ny fampiasana ny toetra srcset dia ahafahanao manome sary avo lenta ho an'ny fampisehoana Retina sady miantoka fa ny sary dia mifanaraka tsara amin'ny fitaovana ambany kokoa.

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

Ao amin'ity ohatra ity, ny srcset manome loharanon-tsary roa ny attribute: image.jpg ho an'ny fitaovana manana famaha 600 pixel na latsaka, ary image@2x.jpg ho an'ny fitaovana manana famaha 1200 pixels na mihoatra. ny 600w ary 1200w Ny mpamoritra dia mamaritra ny haben'ny sary amin'ny piksela, izay manampy ny mpitety tranonkala hamaritra izay sary alaina araka ny fanapahan-kevitry ny fitaovana.

Tsy ny mpanjifa mailaka rehetra no manohana ny srcset toetra. Ny haavon'ny fanohanana ny srcset dia mety miovaova be arakaraka ny mpanjifa mailaka, noho izany dia zava-dehibe ny hitsapana ny mailakao amin'ny mpanjifa marobe mba hahazoana antoka fa aseho tsara ireo sary.

HTML ho an'ny sary amin'ny mailaka nohatsaraina ho an'ny retina

azo atao ny mametaka mailaka HTML mamaly izay hampiseho tsara ny sary amin'ny fanapahan-kevitra natao ho an'ny fampisehoana temimaso. Toy izao ny fomba:

  1. Mamorona sary avo lenta avo roa heny noho ny haben'ny sary tena tianao haseho amin'ny mailaka. Ohatra, raha te-hampiseho sary 300 × 200 ianao dia mamorona sary 600 × 400.
  2. Tehirizo ny sary avo lenta miaraka amin'ny @2x tovana. Ohatra, raha ny sarinao tany am-boalohany image.png, tehirizo ny dikan-teny avo lenta ho sary@2x.png.
  3. Ao amin'ny kaody mailaka HTML anao, ampiasao ity kaody manaraka ity hanehoana ny sary:
<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)]> dia fanehoan-kevitra misy fepetra ampiasaina hanondroana dikan-teny manokana an'ny Microsoft Outlook, izay mampiasa Microsoft Word mba handefasana mailaka HTML. Ny motera famandrihana HTML an'ny Microsoft Word dia mety tsy mitovy amin'ny mpanjifa mailaka sy mpitety tranonkala hafa, ka matetika mila fikarakarana manokana. ny

(gte mso 9) Ny fepetra dia manamarina raha lehibe kokoa na mitovy amin'ny 9 ny dikan-teny Microsoft Office, izay mifanaraka amin'ny Microsoft Office 2000. |(IE) Ny fepetra dia manamarina raha Internet Explorer ny mpanjifa, izay ampiasain'ny Microsoft Outlook matetika.

Imailaka HTML miaraka amin'ny sary voahatsaraina amin'ny Retina Display

Ity misy ohatra iray amin'ny kaody mailaka HTML mamaly izay mampiseho sary amin'ny fanapahan-kevitra natao ho an'ny fampisehoana retina:

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

Soso-kevitra momba ny sary amin'ny retina

Ireto misy toro-hevitra fanampiny momba ny fanatsarana ny mailaka HTML ho an'ny sary namboarina ho an'ny fampisehoana Retina:

  • Ataovy azo antoka fa misy foana ny mari-pamantarana sary misy ny fampiasana alt lahatsoratra mba hanomezana teny manodidina ny sary.
  • Amboary ny sary ho an'ny tranonkala mba hampihenana ny haben'ny rakitra nefa tsy manimba ny kalitaon'ny sary. Anisan'izany ny fampiasana famatrarana sary fitaovana, mampihena ny isan'ny loko ampiasaina amin'ny sary, ary manova ny sary ho amin'ny refy tsara indrindra alohan'ny hampidirana azy amin'ny mailaka.
  • Halaviro ny sary lafika lehibe izay afaka mampiadana ny fotoana fandefasana mailaka.
  • Ny GIF animé dia mety ho lehibe kokoa amin'ny haben'ny rakitra noho ny sary static noho ny sary maromaro ilaina amin'ny famoronana ny sarimiaina, tandremo tsara ny mitazona azy ireo eo ambanin'ny 1 Mb.

Douglas Karr

Douglas Karr dia CMO ny OpenINSIGHTS ary ny mpanorina ny Martech Zone. Nanampy tamin'ny fanombohana MarTech am-polony maro i Douglas, nanampy tamin'ny fahazotoana mitentina 5 miliara dolara amin'ny fividianana sy fampiasam-bola Martech, ary manohy manampy ireo orinasa amin'ny fampiharana sy ny automatique ny paikady momba ny varotra sy ny varotra. Douglas dia fanovàna nomerika eken'ny sehatra iraisam-pirenena ary manampahaizana sy mpandahateny MarTech. Douglas dia mpanoratra navoakan'ny torolàlana Dummie ary boky fitarihana orinasa.

Related Articles

Miverina amin'ny bokotra ambony
akaiky

Adblock hita

Martech Zone dia afaka manome anao ity votoaty ity tsy misy vidiny satria ataonay vola ny tranokalanay amin'ny alàlan'ny fidiram-bolan'ny doka, ny rohy mifandray, ary ny fanohanana. Mankasitraka izahay raha esorinao ny fanakanana dokao rehefa mijery ny tranokalanay ianao.