Ինչպես օգտագործել բարձրորակ պատկերներ ցանցաթաղանթի էկրանների համար ձեր 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 էլ. Ահա թե ինչպես.
- Ստեղծեք բարձր լուծաչափով պատկեր, որը կրկնակի մեծ է իրական պատկերից, որը ցանկանում եք ցուցադրել էլ. Օրինակ, եթե ցանկանում եք ցուցադրել 300×200 պատկեր, ստեղծեք 600×400 պատկեր:
- Պահպանեք բարձր լուծաչափով պատկերը @2x վերջածանց. Օրինակ, եթե ձեր բնօրինակ պատկերն է image.png, պահպանեք բարձր լուծաչափով տարբերակը որպես image@2x.png.
- Ձեր 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.