Kā HTML e-pastā izmantot augstas izšķirtspējas attēlus tīklenes displejiem
Retina displejs ir mārketinga termins, ko lieto Manzana lai aprakstītu augstas izšķirtspējas displeju, kura pikseļu blīvums ir pietiekami augsts, lai cilvēka acs nespēj atšķirt atsevišķus pikseļus tipiskā skatīšanās attālumā. Tīklenes displeja pikseļu blīvums parasti ir 300 pikseļi collā (ppi) vai augstāks, kas ir ievērojami augstāks nekā standarta displejs ar pikseļu blīvumu 72 ppi.
Retina displeji tagad ir diezgan plaši izplatīti displejos, klēpjdatoros, mobilajās ierīcēs un planšetdatoros. Daudzi ražotāji tagad piedāvā augstas izšķirtspējas displejus ar pikseļu blīvumu, kas atbilst vai pārsniedz Apple Retina displeju blīvumu.
CSS, lai parādītu augstākas izšķirtspējas attēlu tīklenes displejam
Varat izmantot šādu CSS kodu, lai ielādētu augstas izšķirtspējas attēlu Retina displejam. Šis kods nosaka ierīces pikseļu blīvumu un ielādē attēlu ar @ 2x sufikss Retina displejiem, vienlaikus ielādējot standarta izšķirtspējas attēlu citiem displejiem.
@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');
}
Vēl viena pieeja ir izmantot vektorgrafiku vai SVG attēlus, kurus var mērogot līdz jebkurai izšķirtspējai, nezaudējot kvalitāti. Šeit ir piemērs:
<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>
Šajā piemērā SVG kods ir iegults tieši HTML e-pastā, izmantojot <svg>
tagu. The viewBox
atribūts nosaka SVG attēla izmērus, savukārt xmlns
atribūts norāda XML nosaukumvietu SVG.
Jūsu darbs IR Klientu apkalpošana max-width
īpašums ir iestatīts uz div
elements, lai nodrošinātu, ka SVG attēls automātiski mērogojas, lai tas atbilstu pieejamajai vietai, šajā gadījumā maksimālajam platumam 300 pikseļi. Šī ir labākā prakse, lai nodrošinātu, ka SVG attēli tiek pareizi parādīti visās ierīcēs un e-pasta klientos.
Piezīme: SVG atbalsts var atšķirties atkarībā no e-pasta klienta, tāpēc ir svarīgi pārbaudīt savu e-pastu vairākos klientos, lai nodrošinātu, ka SVG attēls tiek parādīts pareizi.
Vēl viens veids, kā kodēt HTML e-pastus Retina displejiem, ir izmantot srcset
. Izmantojot atribūtu srcset, varat nodrošināt augstas izšķirtspējas attēlus Retina displejiem, vienlaikus nodrošinot, ka attēli ir atbilstoši izmēriem zemākas izšķirtspējas ierīcēm.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Šajā piemērā srcset
atribūts nodrošina divus attēlu avotus: image.jpg
ierīcēm ar izšķirtspēju 600 pikseļi vai mazāk, un image@2x.jpg
ierīcēm ar izšķirtspēju 1200 pikseļi vai vairāk. The 600w
un 1200w
deskriptori norāda attēlu izmēru pikseļos, kas palīdz pārlūkprogrammai noteikt, kuru attēlu lejupielādēt, pamatojoties uz ierīces izšķirtspēju.
Ne visi e-pasta klienti atbalsta srcset
atribūts. Atbalsta līmenis par srcset
var ievērojami atšķirties atkarībā no e-pasta klienta, tāpēc ir svarīgi pārbaudīt savus e-pastus vairākos klientos, lai nodrošinātu, ka attēli tiek pareizi parādīti.
HTML attēliem e-pastā, optimizēts tīklenes displejiem
ir iespējams kodēt responsīvu HTML e-pastu, kas pareizi parādīs attēlu ar izšķirtspēju, kas optimizēta tīklenes displejiem. Lūk, kā to izdarīt:
- Izveidojiet augstas izšķirtspējas attēlu, kas ir divreiz lielāks par faktisko attēlu, kuru vēlaties parādīt e-pastā. Piemēram, ja vēlaties parādīt 300 × 200 attēlu, izveidojiet 600 × 400 attēlu.
- Saglabājiet augstas izšķirtspējas attēlu, izmantojot @ 2x piedēklis. Piemēram, ja jūsu sākotnējais attēls ir image.png, saglabājiet augstas izšķirtspējas versiju kā attēls@2x.png.
- Savā HTML e-pasta kodā izmantojiet šo kodu, lai parādītu attēlu:
<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)]>
ir nosacīts komentārs, kas tiek izmantots, lai atlasītu noteiktas Microsoft Outlook versijas, kas izmanto Microsoft Word, lai renderētu HTML e-pastus. Microsoft Word HTML renderēšanas programma var ievērojami atšķirties no citiem e-pasta klientiem un tīmekļa pārlūkprogrammām, tāpēc tai bieži ir nepieciešama īpaša apstrāde. The
(gte mso 9)
nosacījums pārbauda, vai Microsoft Office versija ir lielāka vai vienāda ar 9, kas atbilst Microsoft Office 2000. |(IE)
nosacījums pārbauda, vai klients ir Internet Explorer, ko bieži izmanto Microsoft Outlook. HTML e-pasts ar tīklenes displeja optimizētajiem attēliem
Tālāk ir sniegts adaptīva HTML e-pasta koda piemērs, kas parāda attēlu tīklenes displejiem optimizētā izšķirtspējā.
<!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 displeja attēla padomi
Šeit ir daži papildu padomi, kā optimizēt HTML e-pasta ziņojumus attēliem, kas optimizēti Retina displejiem.
- Noteikti vienmēr izmantojiet attēlu tagus
alt
tekstu, lai attēlam nodrošinātu kontekstu. - Optimizējiet attēlus tīmeklim, lai samazinātu faila lielumu, nemazinot attēla kvalitāti. Tas var ietvert izmantošanu attēla kompresija rīkus, samazinot attēlā izmantoto krāsu skaitu un mainot attēla izmērus līdz tā optimālajiem izmēriem pirms tā augšupielādes e-pastā.
- Izvairieties no lieliem fona attēliem, kas var palēnināt e-pasta ielādes laiku.
- Animēto GIF failu lielums var būt lielāks nekā statiskiem attēliem, jo animācijas izveidošanai nepieciešami vairāki kadri. Noteikti saglabājiet tos krietni mazāk par 1 Mb.