Էլփոստի մարքեթինգ և ավտոմատացում

Ինչպես օգտագործել բարձրորակ պատկերներ ցանցաթաղանթի էկրանների համար ձեր HTML էլ

Retina ցուցադրումը մարքեթինգային տերմին է, որն օգտագործվում է Apple նկարագրել բարձր լուծաչափով էկրան, որն ունի այնքան բարձր պիքսելային խտություն, որ մարդու աչքը չի կարողանում տարբերակել առանձին պիքսելները սովորական դիտման հեռավորության վրա: Ցանցաթաղանթի էկրանը սովորաբար ունենում է 300 պիքսել մեկ դյույմի խտություն (PPI) կամ ավելի բարձր, ինչը զգալիորեն բարձր է 72 ppi պիքսելային խտությամբ ստանդարտ էկրանից:

Retina էկրաններն այժմ բավականին հիմնական են էկրանների, նոութբուքերի, շարժական սարքերի և պլանշետների համար: Շատ արտադրողներ այժմ առաջարկում են բարձր լուծաչափով էկրաններ՝ պիքսելների խտությամբ, որոնք համապատասխանում են կամ գերազանցում են Apple-ի Retina էկրաններին:

CSS ցանցաթաղանթի էկրանի համար ավելի բարձր լուծաչափով պատկեր ցուցադրելու համար

Դուք կարող եք օգտագործել հետևյալ CSS կոդը՝ Retina էկրանի համար բարձր լուծաչափով պատկեր բեռնելու համար: Այս կոդը հայտնաբերում է սարքի պիքսելների խտությունը և բեռնում պատկերը @2x Retina էկրանների վերջածանցը, մինչդեռ ստանդարտ լուծաչափով պատկերը բեռնվում է այլ էկրանների համար:

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

Մեկ այլ մոտեցում է օգտագործել վեկտորային գրաֆիկա կամ SVG պատկերներ, որոնք կարող են չափվել ցանկացած լուծաչափի` առանց որակը կորցնելու: Ահա մի օրինակ.

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

Այս օրինակում SVG կոդը ուղղակիորեն ներկառուցված է HTML էլ <svg> պիտակ The viewBox հատկանիշը սահմանում է SVG պատկերի չափերը, մինչդեռ xmlns հատկանիշը սահմանում է SVG-ի XML անվանատարածքը:

The max-width գույքը դրված է div տարր՝ ապահովելու համար, որ SVG պատկերն ավտոմատ կերպով մեծանում է հասանելի տարածությանը համապատասխանելու համար, այս դեպքում մինչև 300px առավելագույն լայնությունը: Սա լավագույն փորձն է՝ ապահովելու, որ SVG պատկերները պատշաճ կերպով ցուցադրվեն բոլոր սարքերում և էլփոստի հաճախորդների վրա:

Նշում: SVG-ի աջակցությունը կարող է տարբեր լինել՝ կախված էլփոստի հաճախորդից, ուստի կարևոր է փորձարկել ձեր էլ. փոստը մի քանի հաճախորդների վրա՝ համոզվելու համար, որ SVG պատկերը պատշաճ կերպով ցուցադրվում է:

Retina էկրանների համար HTML նամակների կոդավորման մեկ այլ եղանակ օգտագործելն է srcset. srcset հատկանիշի օգտագործումը թույլ է տալիս ապահովել բարձր լուծաչափով պատկերներ Retina էկրանների համար՝ միաժամանակ ապահովելով, որ պատկերները ճիշտ չափված են ավելի ցածր լուծաչափով սարքերի համար:

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

Այս օրինակում srcset հատկանիշն ապահովում է պատկերի երկու աղբյուր. image.jpg 600 պիքսել կամ պակաս թույլատրությամբ սարքերի համար և image@2x.jpg 1200 կամ ավելի պիքսել թույլատրությամբ սարքերի համար: Այն 600w և 1200w նկարագրիչները նշում են պատկերների չափը պիքսելներով, ինչը օգնում է դիտարկիչին որոշել, թե որ պատկերը պետք է ներբեռնել՝ ելնելով սարքի լուծաչափից:

Էլփոստի ոչ բոլոր հաճախորդներն են աջակցում srcset հատկանիշ. Աջակցության մակարդակը srcset կարող է շատ տարբեր լինել՝ կախված էլփոստի հաճախորդից, ուստի կարևոր է փորձարկել ձեր նամակները մի քանի հաճախորդների վրա՝ համոզվելու համար, որ պատկերները պատշաճ կերպով ցուցադրվում են:

HTML էլփոստի պատկերների համար՝ օպտիմիզացված ցանցաթաղանթի էկրանների համար

հնարավոր է կոդավորել պատասխանող HTML էլ. Ահա թե ինչպես.

  1. Ստեղծեք բարձր լուծաչափով պատկեր, որը կրկնակի մեծ է իրական պատկերից, որը ցանկանում եք ցուցադրել էլ. Օրինակ, եթե ցանկանում եք ցուցադրել 300×200 պատկեր, ստեղծեք 600×400 պատկեր:
  2. Պահպանեք բարձր լուծաչափով պատկերը @2x վերջածանց. Օրինակ, եթե ձեր բնօրինակ պատկերն է image.png, պահպանեք բարձր լուծաչափով տարբերակը որպես image@2x.png.
  3. Ձեր HTML էլփոստի կոդում օգտագործեք հետևյալ կոդը՝ պատկերը ցուցադրելու համար.
<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)]> պայմանական մեկնաբանություն է, որն օգտագործվում է Microsoft Outlook-ի հատուկ տարբերակները թիրախավորելու համար, որն օգտագործում է Microsoft Word-ը՝ HTML էլ. Microsoft Word-ի HTML արտապատկերման շարժիչը կարող է բավականին տարբերվել էլփոստի այլ հաճախորդներից և վեբ բրաուզերներից, ուստի այն հաճախ պահանջում է հատուկ մշակում: Այն

(gte mso 9) պայմանը ստուգում է, արդյոք Microsoft Office-ի տարբերակը մեծ է կամ հավասար է 9-ի, որը համապատասխանում է Microsoft Office 2000-ին: |(IE) պայմանը ստուգում է, արդյոք հաճախորդը Internet Explorer է, որը հաճախ օգտագործվում է Microsoft Outlook-ի կողմից:

HTML էլփոստ՝ ցանցաթաղանթի էկրանով օպտիմիզացված պատկերներով

Ահա պատասխանող HTML էլփոստի կոդի օրինակ, որը պատկեր է ցուցադրում ցանցաթաղանթի էկրանների համար օպտիմիզացված լուծաչափով.

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

Ահա մի քանի լրացուցիչ խորհուրդներ՝ ձեր HTML էլ. նամակների օպտիմալացման վերաբերյալ Retina էկրանների համար օպտիմիզացված պատկերների համար.

  • Համոզվեք, որ ձեր պատկերների պիտակները միշտ ներառում են օգտագործումը alt տեքստ՝ պատկերի համար համատեքստ ապահովելու համար:
  • Օպտիմիզացրեք պատկերները համացանցի համար՝ ֆայլի չափը նվազեցնելու համար՝ առանց պատկերի որակը խախտելու: Սա կարող է ներառել օգտագործումը պատկերի սեղմում գործիքներ, նվազեցնելով նկարում օգտագործվող գույների քանակը և փոխելով պատկերի չափսերն իր օպտիմալ չափերի, նախքան այն վերբեռնելը էլ.
  • Խուսափեք մեծ ֆոնային պատկերներից, որոնք կարող են դանդաղեցնել էլփոստի բեռնման ժամանակը:
  • Անիմացիոն GIF-ները կարող են ֆայլի չափով ավելի մեծ լինել, քան ստատիկ պատկերները՝ անիմացիայի ստեղծման համար անհրաժեշտ բազմաթիվ շրջանակների պատճառով, համոզվեք, որ դրանք 1-ից ցածր պահեք: Mb.

Douglas Karr

Douglas Karr -ի CMO-ն է OpenINSIGHTS և հիմնադիրը Martech Zone. Դուգլասը օգնել է MarTech-ի տասնյակ հաջողակ ստարտափների, աջակցել է ավելի քան 5 միլիարդ դոլարի չափով Martech-ի ձեռքբերումների և ներդրումների պատշաճ ուսումնասիրությանը և շարունակում է աջակցել ընկերություններին իրենց վաճառքի և շուկայավարման ռազմավարությունների իրականացման և ավտոմատացման գործում: Դուգլասը միջազգայնորեն ճանաչված թվային փոխակերպման և MarTech փորձագետ և խոսնակ է: Դուգլասը նաև Դումմիի ուղեցույցի և բիզնեսի առաջնորդության գրքի հրատարակված հեղինակ է:

Առնչվող հոդվածներ

Վերադառնալ սկիզբ կոճակը
փակել

Հայտնաբերվել է Adblock

Martech Zone կարող է անվճար տրամադրել ձեզ այս բովանդակությունը, քանի որ մենք դրամայնացնում ենք մեր կայքը գովազդից ստացված եկամուտների, փոխկապակցված հղումների և հովանավորությունների միջոցով: Մենք երախտապարտ կլինենք, եթե մեր կայքը դիտելիս հեռացնեիք ձեր գովազդային արգելափակիչը: