Email Marketing & Automation

Olee otú Iji High-Mkpebi Images maka Retina Ngosipụta na gị HTML Email

Ngosipụta retina bụ okwu ahịa nke na-eji Apple iji kọwapụta ihe ngosi dị elu nke nwere njupụta pikselụ dị elu nke na anya mmadụ enweghị ike ịmata ọdịiche dị n'otu pikselụ n'ebe dị anya nlele. Ngosipụta retina na-enwekarị njupụta pikselụ 300 pikselụ kwa inch.ppi) ma ọ bụ karịa, nke dị elu karịa ihe ngosi ọkọlọtọ nwere njupụta pixel nke 72 ppi.

Ngosipụta retina bụzi ihe bụ isi maka ihe ngosi, laptọọpụ, ngwaọrụ mkpanaka, na mbadamba. Ọtụtụ ndị na-emepụta ihe na-enye ngosi ngosi dị elu nwere njupụta pixel dabara ma ọ bụ karịa nke ngosi Apple's Retina.

CSS iji gosi onyonyo mkpebi dị elu maka ngosipụta retina

Ị nwere ike iji koodu CSS na-esonụ iji buo onyogho dị elu maka ngosi Retina. Koodu a na-achọpụta njupụta pikselụ ngwaọrụ ma jiri ya buo onyonyo a @ 2x suffix maka ihe ngosi Retina, ka ị na-ebugo onyonyo ọkọlọtọ maka ngosipụta ndị ọzọ.

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

Ụzọ ọzọ bụ iji vector graphics ma ọ bụ SVG onyogho, nke nwere ike itule na mkpebi ọ bụla na-enweghị atụfu mma. Nke a bụ ọmụmaatụ:

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

N'ihe atụ a, a na-etinye koodu SVG ozugbo na email HTML site na iji <svg> mkpado Na viewBox àgwà na-akọwa akụkụ nke ihe oyiyi SVG, ebe ndị xmlns àgwà na-akọwapụta oghere aha XML maka SVG.

The max-width ihe onwunwe atọrọ na div mmewere iji hụ na ihe onyonyo SVG na-agbakọ ozugbo ka ọ dabara ohere dị, ruo obosara kachasị 300px na nke a. Nke a bụ omume kachasị mma maka ịhụ na egosipụtara onyonyo SVG nke ọma na ngwaọrụ niile yana ndị ahịa email.

Cheta na: Nkwado SVG nwere ike ịdị iche dabere na onye ahịa email, yabụ ọ dị mkpa ịnwale email gị na ọtụtụ ndị ahịa iji hụ na egosipụtara onyonyo SVG nke ọma.

Ụzọ ọzọ nke nzuzo HTML email maka Retina ngosi bụ iji srcset. Iji njirimara srcset na-enye gị ohere ịnye onyonyo nwere mkpebi dị elu maka ngosipụta Retina ebe ị na-ahụ na foto ndị ahụ nwere nha nke ọma maka ngwaọrụ ndị nwere obere mkpebi.

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

Na ihe atụ a, srcset àgwà na-enye isi mmalite foto abụọ: image.jpg maka ngwaọrụ nwere mkpebi nke 600 pikselụ ma ọ bụ obere, na image@2x.jpg maka ngwaọrụ nwere mkpebi nke 1200 pikselụ ma ọ bụ karịa. Nke 600w na 1200w Ndị na-akọwa nkọwa na-akọwapụta nha onyonyo dị na pikselụ, nke na-enyere ihe nchọgharị aka ikpebi onyonyo ọ ga-ebudata dabere na mkpebi ngwaọrụ ahụ.

Ọ bụghị ndị ahịa email niile na-akwado ya srcset àgwà. Ọkwa nkwado maka srcset nwere ike ịdịgasị iche dabere na onye ahịa email, yabụ ọ dị mkpa ịnwale ozi-e gị n'ọtụtụ ndị ahịa iji hụ na egosipụtara onyonyo nke ọma.

HTML N'ihi Images Na Email Kachasị N'ihi Retina Ngosipụta

ọ ga-ekwe omume itinye koodu email HTML na-anabata nke ga-egosipụta nke ọma na onyonyo na mkpebi kachasị maka ngosipụta retina. Nke a bụ ka:

  1. Mepụta onyonyo dị elu nke ji okpukpu abụọ nha nke ezigbo onyonyo ịchọrọ igosipụta na ozi-e. Dịka ọmụmaatụ, ọ bụrụ na ịchọrọ igosipụta onyonyo 300×200, mepụta onyonyo 600×400.
  2. Chekwaa onyonyo dị elu site na iji @ 2x suffix. Dịka ọmụmaatụ, ọ bụrụ na onyonyo izizi gị bụ image.png, Chekwaa ụdị mkpebi dị elu dị ka foto @2x.png.
  3. Na koodu email HTML gị, jiri koodu a gosi onyonyo a:
<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)]> bụ okwu n'ọnọdụ ọnọdụ nke a na-eji lekwasịrị anya ụdịdị Microsoft Outlook, nke na-eji Microsoft Okwu nye ozi-e HTML. Igwe ntụgharị HTML nke Microsoft Okwu nwere ike ịdị iche na ndị ahịa email ndị ọzọ na ihe nchọgharị weebụ, yabụ ọ na-achọkarị njikwa pụrụ iche. Nke

(gte mso 9) ọnọdụ na-enyocha ma ọ bụrụ na ụdị Microsoft Office karịrị 9 ma ọ bụ hà nhata, nke dabara na Microsoft Office 2000. |(IE) na-enyocha ọnọdụ ma ọ bụrụ na onye ahịa bụ Internet Explorer, nke Microsoft Outlook na-ejikarị.

Email HTML nwere ihe ngosi Retina kachasị mma

Nke a bụ ọmụmaatụ koodu email HTML na-anabata nke na-egosipụta onyonyo na mkpebi emebere maka ngosipụta 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>

Atụmatụ Ngosipụta Retina

Nke a bụ ndụmọdụ ndị ọzọ maka ịkwalite ozi ịntanetị HTML gị maka onyonyo emeziri maka ngosipụta Retina:

  • Jide n'aka na ị nwere mkpado onyonyo gị mgbe niile gụnyere iji alt ederede iji nye ọnọdụ maka onyonyo a.
  • Bulite onyonyo maka webụ iji belata nha faịlụ na-emebighị ogo onyonyo. Nke a nwere ike ịgụnye iji image mkpakọ ngwá ọrụ, ibelata ọnụ ọgụgụ nke agba eji na oyiyi, na resize oyiyi na ya kacha mma akụkụ tupu ebugo ya na email.
  • Zere nnukwu onyonyo n'azụ nwere ike belata oge ibu email.
  • GIF animated nwere ike ibu nha faịlụ karịa onyonyo kwụ ọtọ n'ihi ọtụtụ okpokolo agba achọrọ iji mepụta animation ahụ, jide n'aka na idobe ha nke ọma n'okpuru 1 Mb.

Douglas Karr

Douglas Karr bụ CMO Mepee ihe ọmụma na onye nchoputa nke Martech Zone. Douglas enyerela ọtụtụ mmalite MarTech aka nke ọma, nyere aka n'ịrụsi ọrụ ike nke ihe karịrị ijeri $ 5 na nnweta na ntinye ego nke Martech, ma na-aga n'ihu na-enyere ụlọ ọrụ aka n'imejuputa na imezi usoro ahịa na ahịa ha. Douglas bụ mgbanwe dijitalụ ama ama na mba ụwa na ọkachamara MarTech na ọkà okwu. Douglas bụkwa onye odee bipụtara nke ndu Dummie na akwụkwọ ndu azụmaahịa.

njikọ Articles

Gaa na bọtịnụ n'elu
nso

Achọpụtara ihe mgbochi

Martech Zone nwere ike ịnye gị ọdịnaya a n'efu n'ihi na anyị na-enweta saịtị anyị site na ego mgbasa ozi, njikọ ndị mmekọ, na nkwado. Ọ ga-amasị anyị ma ị ga-ewepụ ihe mgbochi mgbasa ozi gị ka ị na-elele saịtị anyị.