Hvernig á að nota háupplausnarmyndir fyrir sjónhimnuskjái í HTML tölvupóstinum þínum
Retina display er markaðshugtak sem notað er af Apple að lýsa skjá með mikilli upplausn sem hefur nógu mikla pixlaþéttleika til að mannsaugað geti ekki greint einstaka pixla í dæmigerðri útsýnisfjarlægð. Sjónuskjár hefur venjulega pixlaþéttleika upp á 300 pixla á tommu (pát) eða hærra, sem er verulega hærra en venjulegur skjár með pixlaþéttleika upp á 72 ppi.
Retina skjáir eru nú frekar almennir fyrir skjái, fartölvur, farsíma og spjaldtölvur. Margir framleiðendur bjóða nú upp á skjái í hárri upplausn með pixlaþéttleika sem samsvarar eða fer yfir Retina skjái frá Apple.
CSS til að sýna mynd með hærri upplausn fyrir sjónhimnuskjá
Þú getur notað eftirfarandi CSS kóða til að hlaða mynd í hárri upplausn fyrir Retina skjá. Þessi kóði greinir pixlaþéttleika tækisins og hleður myndina með @ 2x viðskeyti fyrir Retina skjái, en hleður inn myndinni með venjulegri upplausn fyrir aðra skjái.
@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');
}
Önnur aðferð er að nota vektorgrafík eða SVG myndir, sem geta skalað í hvaða upplausn sem er án þess að tapa gæðum. Hér er dæmi:
<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>
Í þessu dæmi er SVG kóðinn felldur beint inn í HTML tölvupóstinn með því að nota <svg>
merki. The viewBox
eiginleiki skilgreinir stærð SVG myndarinnar, en xmlns
eigind tilgreinir XML nafnrýmið fyrir SVG.
The max-width
eign er sett á div
þáttur til að tryggja að SVG myndin skalast sjálfkrafa til að passa við laus pláss, allt að hámarksbreidd 300px í þessu tilfelli. Þetta er besta starfsvenjan til að tryggja að SVG myndir séu birtar á réttan hátt á öllum tækjum og tölvupóstforritum.
Athugaðu: SVG stuðningur getur verið mismunandi eftir tölvupóstforriti, svo það er mikilvægt að prófa tölvupóstinn þinn á mörgum viðskiptavinum til að tryggja að SVG myndin sé rétt birt.
Önnur leið til að kóða HTML tölvupóst fyrir Retina skjái er að nota srcset
. Með því að nota srcset eiginleikann geturðu útvegað myndir í hárri upplausn fyrir Retina skjái á sama tíma og þú tryggir að myndirnar séu í réttri stærð fyrir tæki með lægri upplausn.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Í þessu dæmi er srcset
eiginleiki veitir tvær myndaheimildir: image.jpg
fyrir tæki með 600 pixla upplausn eða minni, og image@2x.jpg
fyrir tæki með 1200 pixla upplausn eða meira. The 600w
og 1200w
lýsingar tilgreina stærð myndanna í pixlum, sem hjálpar vafranum að ákvarða hvaða mynd á að hlaða niður miðað við upplausn tækisins.
Ekki styðja allir tölvupóstforrit srcset
eiginleiki. Stuðningsstig fyrir srcset
getur verið mjög mismunandi eftir tölvupóstforritinu, svo það er mikilvægt að prófa tölvupóstinn þinn á mörgum viðskiptavinum til að tryggja að myndirnar séu birtar á réttan hátt.
HTML fyrir myndir í tölvupósti fínstillt fyrir sjónhimnuskjái
það er hægt að kóða móttækilegan HTML tölvupóst sem mun birta mynd á réttan hátt í upplausn sem er fínstillt fyrir sjónhimnuskjái. Svona:
- Búðu til mynd í hárri upplausn sem er tvöfalt stærri en raunveruleg mynd sem þú vilt birta í tölvupóstinum. Til dæmis, ef þú vilt sýna 300×200 mynd skaltu búa til 600×400 mynd.
- Vistaðu myndina í hárri upplausn með @ 2x viðskeyti. Til dæmis, ef upprunalega myndin þín er image.png, vistaðu háupplausnarútgáfuna sem mynd@2x.png.
- Notaðu eftirfarandi kóða í HTML tölvupóstkóðanum þínum til að birta myndina:
<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)]>
er skilyrt athugasemd sem er notuð til að miða á sérstakar útgáfur af Microsoft Outlook, sem notar Microsoft Word til að birta HTML tölvupóst. HTML flutningsvél Microsoft Word getur verið töluvert frábrugðin öðrum tölvupóstforritum og vefvöfrum, svo það þarf oft sérstaka meðhöndlun. The
(gte mso 9)
ástand athugar hvort Microsoft Office útgáfan sé stærri en eða jöfn 9, sem samsvarar Microsoft Office 2000. |(IE)
ástand athugar hvort biðlarinn sé Internet Explorer, sem er oft notað af Microsoft Outlook. HTML tölvupóstur með fínstilltum myndum á sjónuskjá
Hér er dæmi um móttækilegan HTML tölvupóstkóða sem sýnir mynd í upplausn sem er fínstillt fyrir sjónhimnuskjái:
<!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>
Ábendingar um mynd á sjónhimnu
Hér eru nokkur viðbótarráð til að fínstilla HTML tölvupóstinn þinn fyrir myndir sem eru fínstilltar fyrir Retina skjái:
- Vertu viss um að hafa alltaf myndmerkin þín með því að nota
alt
texta til að skapa samhengi fyrir myndina. - Fínstilltu myndir fyrir vefinn til að minnka skráarstærð án þess að skerða myndgæði. Þetta getur falið í sér að nota myndþjöppun verkfæri, fækka litum sem notaðir eru í myndinni og breyta stærð myndarinnar í bestu stærðir áður en hún er hlaðið upp í tölvupóstinn.
- Forðastu stórar bakgrunnsmyndir sem geta hægt á hleðslutíma tölvupósts.
- Hreyfimyndir GIF geta verið stærri í skráarstærð en kyrrstæðar myndir vegna margra ramma sem þarf til að búa til hreyfimyndina, vertu viss um að halda þeim vel undir 1 Mb.