Email Marketing ug Automation

Giunsa Paggamit ang High-Resolution nga mga Imahe para sa Retina Display Sa Imong HTML Email

Retina display kay usa ka termino sa marketing nga gigamit sa Apple aron ihulagway ang usa ka taas nga resolusyon nga display nga adunay pixel density nga igo nga taas nga ang mata sa tawo dili makaila sa indibidwal nga mga pixel sa kasagaran nga gilay-on sa pagtan-aw. Ang retina display kasagaran adunay pixel density nga 300 pixels kada pulgada (ppi) o mas taas pa, nga mas taas kay sa standard display nga adunay pixel density nga 72 ppi.

Ang mga display sa retina karon medyo mainstream alang sa mga display, laptop, mobile device, ug tablet. Daghang mga tiggama karon ang nagtanyag sa mga pasundayag nga adunay taas nga resolusyon nga adunay mga densidad sa pixel nga katumbas o labaw sa mga gipakita sa Retina sa Apple.

CSS Aron Ipakita ang Mas Taas nga Resolusyon nga Imahe Para sa Retina Display

Mahimo nimong gamiton ang mosunod nga CSS code aron makarga ang taas nga resolusyon nga imahe para sa Retina display. Kini nga code nakamatikod sa densidad sa pixel sa device ug nagkarga sa hulagway sa @ 2x suffix para sa Retina display, samtang nagkarga sa standard-resolution nga hulagway para sa ubang mga display.

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

Ang laing paagi mao ang paggamit sa vector graphics o SVG mga hulagway, nga makasukod sa bisan unsang resolusyon nga dili mawala ang kalidad. Ania ang usa ka pananglitan:

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

Niini nga pananglitan, ang SVG code direktang gi-embed sa HTML email gamit ang <svg> tag Ang viewBox attribute naghubit sa mga sukod sa SVG nga hulagway, samtang ang xmlns Ang attribute nagtino sa XML namespace para sa SVG.

ang max-width kabtangan gibutang sa div elemento aron masiguro nga ang SVG nga imahen nga mga timbangan awtomatiko nga mohaum sa magamit nga wanang, hangtod sa labing taas nga gilapdon nga 300px sa kini nga kaso. Kini usa ka labing kaayo nga praktis alang sa pagsiguro nga ang mga imahe sa SVG gipakita sa husto sa tanan nga mga aparato ug mga kliyente sa email.

Mubo nga sulat: Ang suporta sa SVG mahimong magkalainlain depende sa kliyente sa email, busa importante nga sulayan ang imong email sa daghang mga kliyente aron masiguro nga ang SVG nga hulagway gipakita sa husto.

Ang laing paagi sa pag-coding sa HTML nga mga email alang sa Retina display mao ang paggamit srcset. Ang paggamit sa srcset attribute nagtugot kanimo sa paghatag og taas nga resolusyon nga mga hulagway alang sa Retina nga mga display samtang nagsiguro nga ang mga hulagway husto ang gidak-on alang sa ubos nga resolusyon nga mga himan.

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

Sa kini nga pananglitan, ang srcset Ang attribute naghatag og duha ka tinubdan sa imahe: image.jpg alang sa mga himan nga adunay resolusyon nga 600 ka pixel o ubos pa, ug image@2x.jpg alang sa mga device nga adunay resolusyon nga 1200 pixels o labaw pa. Ang 600w ug 1200w Ang mga deskriptor nagtino sa gidak-on sa mga imahe sa mga pixel, nga makatabang sa browser nga mahibal-an kung unsang imahe ang i-download base sa resolusyon sa aparato.

Dili tanan nga mga kliyente sa email nagsuporta sa srcset hiyas. Ang lebel sa suporta alang sa srcset mahimong magkalain-lain depende sa email client, busa importante nga sulayan ang imong mga email sa daghang mga kliyente aron masiguro nga ang mga hulagway gipakita sa husto.

HTML Para sa Mga Imahen Sa Email Na-optimize Para sa Retina Displays

posible nga mag-code sa usa ka responsive HTML email nga hustong magpakita sa usa ka imahe sa usa ka resolusyon nga na-optimize alang sa retina display. Ania kung giunsa:

  1. Paghimo og taas nga resolusyon nga hulagway nga doble ang gidak-on sa aktuwal nga hulagway nga gusto nimong ipakita sa email. Pananglitan, kung gusto nimo ipakita ang usa ka 300 × 200 nga imahe, paghimo usa ka 600 × 400 nga imahe.
  2. I-save ang taas nga resolusyon nga imahe gamit ang @ 2x suffix. Pananglitan, kung ang imong orihinal nga imahe image.png, i-save ang taas nga resolusyon nga bersyon ingon larawan@2x.png.
  3. Sa imong HTML email code, gamita ang mosunod nga code aron ipakita ang hulagway:
<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)]> usa ka kondisyonal nga komentaryo nga gigamit sa pag-target sa piho nga mga bersyon sa Microsoft Outlook, nga naggamit sa Microsoft Word sa paghubad sa HTML nga mga email. Ang HTML rendering engine sa Microsoft Word mahimong lahi kaayo sa ubang mga email client ug web browser, mao nga kasagaran nagkinahanglan kini og espesyal nga pagdumala. Ang

(gte mso 9) Gisusi sa kondisyon kung ang bersyon sa Microsoft Office mas dako o katumbas sa 9, nga katumbas sa Microsoft Office 2000. Ang |(IE) Gisusi sa kondisyon kung ang kliyente mao ang Internet Explorer, nga sagad gigamit sa Microsoft Outlook.

HTML Email Uban sa Retina Display Optimized Images

Ania ang usa ka pananglitan sa usa ka responsive HTML email code nga nagpakita sa usa ka imahe sa usa ka resolusyon nga na-optimize alang sa retina display:

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

Mga Tip sa Retina Display Image

Ania ang pipila ka dugang nga mga tip sa pag-optimize sa imong HTML nga mga Email para sa mga imahe nga na-optimize alang sa Retina display:

  • Siguruha nga ang imong mga tag sa imahe kanunay nga gilakip sa paggamit alt teksto aron mahatagan ang konteksto sa imahe.
  • I-optimize ang mga imahe para sa web aron makunhuran ang gidak-on sa file nga dili makompromiso ang kalidad sa imahe. Mahimong maglakip kini sa paggamit pagpugong sa imahe mga himan, pagkunhod sa gidaghanon sa mga kolor nga gigamit sa hulagway, ug pag-usab sa gidak-on sa hulagway ngadto sa labing maayo nga mga sukod niini sa dili pa kini i-upload sa email.
  • Likayi ang dagkong mga hulagway sa background nga makapahinay sa mga oras sa pagkarga sa email.
  • Ang mga animated nga GIF mahimong mas dako sa gidak-on sa file kay sa static nga mga hulagway tungod sa daghang mga frame nga gikinahanglan sa paghimo sa animation, siguroha nga ipabilin kini nga maayo ubos sa 1 Mb.

Douglas Karr

Douglas Karr mao ang CMO sa OpenINSIGHTS ug ang nagtukod sa Martech Zone. Gitabangan ni Douglas ang daghang mga malampuson nga mga pagsugod sa MarTech, nakatabang sa tungod sa kakugi nga kapin sa $5 bilyon sa mga pagkuha ug pamuhunan sa Martech, ug nagpadayon sa pagtabang sa mga kompanya sa pagpatuman ug pag-automate sa ilang mga estratehiya sa pagbaligya ug pagpamaligya. Si Douglas usa ka internasyonal nga giila nga digital nga pagbag-o ug eksperto ug mamumulong sa MarTech. Si Douglas usa usab ka gipatik nga tagsulat sa usa ka giya ni Dummie ug usa ka libro sa pagpangulo sa negosyo.

Nalangkit nga mga Artikulo

Balik sa ibabaw nga button
Close

Nakit-an ang Adblock

Martech Zone makahatag kanimo niini nga sulod nga walay bayad tungod kay among gi-monetize ang among site pinaagi sa ad revenue, affiliate links, ug sponsorships. Mapasalamaton kami kung imong tangtangon ang imong ad blocker samtang imong gitan-aw ang among site.