Kutsatsa kwa Imelo & Zodzichitira

Momwe Mungagwiritsire Ntchito Zithunzi Zowoneka Bwino Kwambiri Zowonetsa Retina Mu Imelo Yanu Ya HTML

Chiwonetsero cha retina ndi mawu otsatsa omwe amagwiritsidwa ntchito ndi apulo kufotokoza mawonekedwe apamwamba kwambiri omwe ali ndi kachulukidwe ka pixel okwera kwambiri kotero kuti diso la munthu silingathe kusiyanitsa ma pixel omwe ali pamtunda wowonera. Chiwonetsero cha retina nthawi zambiri chimakhala ndi makulidwe a pixel a 300 pixels pa inchi (ppi) kapena apamwamba, omwe ndi apamwamba kwambiri kuposa chiwonetsero chokhazikika chokhala ndi kachulukidwe ka pixel ya 72 ppi.

Zowonetsera za retina tsopano ndizofala kwambiri pazowonetsa, ma laputopu, zida zam'manja, ndi mapiritsi. Opanga ambiri tsopano amapereka zowonetsa zowoneka bwino kwambiri zokhala ndi makulidwe a pixel omwe amafanana kapena kupitilira zowonetsera za Apple's Retina.

CSS Kuwonetsa Chithunzi Chokwezeka Kwambiri Chowonetsera Retina

Mutha kugwiritsa ntchito kachidindo ka CSS kotsatirako kuti mukweze chithunzi chokwezeka kwambiri cha chiwonetsero cha retina. Khodi iyi imazindikira kuchuluka kwa pixel ya chipangizocho ndikuyika chithunzicho ndi @ 2x zowonetsera za retina, pamene mukukweza chithunzi chokhazikika pazithunzi zina.

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

Njira ina ndiyo kugwiritsa ntchito zithunzi za vector kapena SVG zithunzi, zomwe zimatha kupitilira chiganizo chilichonse popanda kutaya mtundu. Nachi chitsanzo:

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

Muchitsanzo ichi, nambala ya SVG imayikidwa mwachindunji mu imelo ya HTML pogwiritsa ntchito <svg> tag. The viewBox chikhalidwe chimatanthawuza kukula kwa chithunzi cha SVG, pomwe xmlns mawonekedwe amatchula dzina la XML la SVG.

The max-width katundu waikidwa pa div chinthu chowonetsetsa kuti chithunzi cha SVG chimangodziyesa kuti chigwirizane ndi malo omwe alipo, mpaka kufika pamtunda wa 300px pamenepa. Iyi ndi njira yabwino kwambiri yowonetsetsa kuti zithunzi za SVG zikuwonetsedwa bwino pazida zonse ndi makasitomala a imelo.

Zindikirani: Thandizo la SVG limatha kusiyanasiyana kutengera kasitomala wa imelo, kotero ndikofunikira kuyesa imelo yanu pamakasitomala angapo kuti muwonetsetse kuti chithunzi cha SVG chikuwonetsedwa bwino.

Njira ina yolembera maimelo a HTML pazowonetsa za retina ndikugwiritsa ntchito srcset. Kugwiritsa ntchito mawonekedwe a srcset kumakupatsani mwayi wopereka zithunzi zowoneka bwino zowonetsera retina ndikuwonetsetsa kuti zithunzizo zili ndi kukula koyenera kwa zida zotsika.

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

Mu chitsanzo ichi, srcset mawonekedwe amapereka magwero awiri azithunzi: image.jpg pazida zokhala ndi ma pixel a 600 kapena kuchepera, ndi image@2x.jpg pazida zokhala ndi ma pixel a 1200 kapena kupitilira apo. The 600w ndi 1200w zofotokozera zimatchula kukula kwa zithunzi mu ma pixel, zomwe zimathandiza osatsegula kudziwa kuti ndi chithunzi chiti chomwe angatsitse malinga ndi momwe chipangizocho chilili.

Sikuti makasitomala onse a imelo amathandizira srcset khalidwe. Mlingo wa chithandizo kwa srcset zingasiyane mosiyanasiyana malinga ndi imelo kasitomala, kotero ndikofunika kuyesa maimelo anu angapo makasitomala kuonetsetsa kuti zithunzi anasonyeza bwino.

HTML Pazithunzi Mu Imelo Yokometsedwa Kwa Mawonekedwe a Retina

ndizotheka kuyika imelo yomvera ya HTML yomwe iwonetse bwino chithunzi pamalingaliro okonzedwa kuti ziwonetsedwe za retina. Umu ndi momwe:

  1. Pangani chithunzi chapamwamba chomwe chili ndi kukula kuwirikiza kwa chithunzi chenicheni chomwe mukufuna kuwonetsa mu imelo. Mwachitsanzo, ngati mukufuna kuwonetsa chithunzi cha 300×200, pangani chithunzi cha 600×400.
  2. Sungani chithunzi chokwezeka kwambiri ndi fayilo ya @ 2x mawu okwana. Mwachitsanzo, ngati chithunzi chanu choyambirira ndi image.png, sungani mawonekedwe apamwamba ngati chithunzi@2x.png.
  3. Mu imelo yanu ya imelo ya HTML, gwiritsani ntchito nambala iyi kuti muwonetse chithunzichi:
<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)]> ndi ndemanga yokhazikika yomwe imagwiritsidwa ntchito kutsata mitundu ina ya Microsoft Outlook, yomwe imagwiritsa ntchito Microsoft Word popereka maimelo a HTML. Injini yomasulira ya HTML ya Microsoft Mawu imatha kukhala yosiyana kwambiri ndi makasitomala ena a imelo ndi asakatuli, chifukwa chake nthawi zambiri imafunika kuchitidwa mwapadera. The

(gte mso 9) Imayang'ana ngati mtundu wa Microsoft Office ndi waukulu kuposa kapena wofanana ndi 9, womwe ukufanana ndi Microsoft Office 2000. |(IE) Imayang'ana ngati kasitomala ndi Internet Explorer, yomwe imagwiritsidwa ntchito ndi Microsoft Outlook.

Imelo ya HTML yokhala ndi zithunzi zowoneka bwino za retina

Nachi chitsanzo cha khodi ya imelo ya HTML yomwe imawonetsa chithunzi pamawonekedwe okonzedwa kuti ziwonekere mu 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>

Malangizo a Chithunzi cha Retina

Nawa maupangiri ena owonjezera pa kukhathamiritsa Maimelo anu a HTML pazithunzi zokongoletsedwa ndi mawonekedwe a retina:

  • Onetsetsani kuti nthawi zonse ma tag anu azithunzi akuphatikiza kugwiritsa ntchito alt malemba kuti apereke nkhani ya chithunzicho.
  • Konzani zithunzi zapaintaneti kuti muchepetse kukula kwa fayilo popanda kusokoneza mtundu wazithunzi. Izi zingaphatikizepo kugwiritsa ntchito kusinthasintha kwajambula zida, kuchepetsa kuchuluka kwa mitundu yomwe imagwiritsidwa ntchito pachithunzichi, ndikusinthiranso chithunzicho kukhala miyeso yake yoyenera musanachitumize ku imelo.
  • Pewani zithunzi zazikulu zakumbuyo zomwe zingachedwetse nthawi yotumiza maimelo.
  • Makanema a GIF amatha kukhala akulu kukula kwamafayilo kuposa zithunzi zokhazikika chifukwa cha mafelemu angapo ofunikira kuti apange makanema ojambula, onetsetsani kuti mwawasunga bwino pansi pa 1. Mb.

Douglas Karr

Douglas Karr ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.