Kuidas kasutada HTML-meilis võrkkesta kuvamiseks kõrge eraldusvõimega pilte
Retina ekraan on turundustermin, mida kasutab õun kirjeldada kõrge eraldusvõimega ekraani, mille pikslitihedus on piisavalt kõrge, et inimsilm ei suuda eristada üksikuid piksleid tüüpilisel vaatamiskaugusel. Võrkkesta kuvari pikslitihedus on tavaliselt 300 pikslit tolli kohta (ppi) või kõrgem, mis on oluliselt kõrgem kui tavaekraan, mille pikslitihedus on 72 ppi.
Retina-ekraanid on nüüd üsna levinud kuvarite, sülearvutite, mobiilseadmete ja tahvelarvutite jaoks. Paljud tootjad pakuvad nüüd kõrge eraldusvõimega ekraane, mille pikslitihedus vastab või ületab Apple'i Retina-ekraanide oma.
CSS suurema eraldusvõimega pildi kuvamiseks võrkkesta ekraani jaoks
Retina-ekraani jaoks kõrge eraldusvõimega pildi laadimiseks saate kasutada järgmist CSS-koodi. See kood tuvastab seadme pikslitiheduse ja laadib pildi koos @ 2x Retina-kuvarite järelliide, laadides samal ajal standarderaldusvõimega kujutist teistele kuvaritele.
@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');
}
Teine lähenemine on kasutada vektorgraafikat või SVG pilte, mida saab mastaapida mis tahes eraldusvõimeni ilma kvaliteeti kaotamata. Siin on näide:
<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>
Selles näites on SVG-kood manustatud otse HTML-meili, kasutades <svg>
silt. The viewBox
atribuut määrab SVG-kujutise mõõtmed, samas kui xmlns
atribuut määrab SVG XML-nimeruumi.
. max-width
vara on määratud div
element, et tagada SVG-pildi automaatne skaleerimine, et see sobiks vaba ruumiga, antud juhul maksimaalselt 300 pikslit. See on parim tava tagamaks, et SVG-pilte kuvatakse kõigis seadmetes ja meiliklientides õigesti.
Märge: SVG-tugi võib olenevalt meilikliendist erineda, seega on oluline testida oma meili mitme kliendiga, et tagada SVG-pildi õige kuvamine.
Teine viis HTML-i e-kirjade kodeerimiseks Retina kuvarite jaoks on kasutada srcset
. Atribuudi srcset kasutamine võimaldab pakkuda kõrge eraldusvõimega pilte Retina-ekraanide jaoks, tagades samal ajal, et kujutised on madalama eraldusvõimega seadmete jaoks õige suurusega.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Selles näites on srcset
atribuut pakub kahte pildiallikat: image.jpg
seadmete jaoks, mille eraldusvõime on 600 pikslit või vähem, ja image@2x.jpg
seadmete jaoks, mille eraldusvõime on 1200 pikslit või rohkem. The 600w
ja 1200w
deskriptorid määravad piltide suuruse pikslites, mis aitab brauseril seadme eraldusvõime põhjal määrata, millist pilti alla laadida.
Mitte kõik meilikliendid ei toeta seda srcset
atribuut. Toetuse tase srcset
võib olenevalt meilikliendist väga erineda, seega on oluline oma e-kirju testida mitme kliendiga, et tagada piltide õige kuvamine.
HTML e-posti teel saadetavate piltide jaoks, optimeeritud võrkkesta kuvarite jaoks
on võimalik kodeerida reageeriv HTML-meil, mis kuvab pilti õigesti võrkkesta kuvade jaoks optimeeritud eraldusvõimega. Tehke järgmist.
- Looge kõrge eraldusvõimega pilt, mis on kaks korda suurem tegelikust pildist, mida soovite meilis kuvada. Näiteks kui soovite kuvada 300 × 200 pilti, looge 600 × 400 pilt.
- Salvestage kõrge eraldusvõimega pilt nupuga @ 2x järelliide. Näiteks kui teie algne pilt on image.png, salvestage kõrge eraldusvõimega versioon nimega pilt@2x.png.
- Kasutage oma HTML-i meilikoodis pildi kuvamiseks järgmist koodi:
<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)]>
on tingimuslik kommentaar, mida kasutatakse Microsoft Outlooki konkreetsete versioonide sihtimiseks, mis kasutab HTML-meilide renderdamiseks Microsoft Wordi. Microsoft Wordi HTML-i renderdusmootor võib teistest meiliklientidest ja veebibrauseritest üsna erineda, mistõttu nõuab see sageli erilist käsitsemist. The
(gte mso 9)
tingimus kontrollib, kas Microsoft Office'i versioon on suurem kui 9 või sellega võrdne, mis vastab Microsoft Office 2000-le. |(IE)
tingimus kontrollib, kas kliendiks on Internet Explorer, mida Microsoft Outlook sageli kasutab. HTML-meil võrkkesta kuva optimeeritud piltidega
Siin on näide reageerivast HTML-meilikoodist, mis kuvab pildi võrkkesta kuvamiseks optimeeritud eraldusvõimega.
<!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 kuvamise näpunäited
Siin on mõned täiendavad näpunäited HTML-meilide optimeerimiseks Retina kuvarite jaoks optimeeritud piltide jaoks.
- Veenduge, et teie pildisildid sisaldaksid alati kasutamist
alt
teksti, mis annab pildile konteksti. - Optimeerige pilte veebi jaoks, et vähendada faili suurust ilma pildikvaliteeti kahjustamata. See võib hõlmata kasutamist pildi tihendamine tööriistad, pildil kasutatavate värvide arvu vähendamine ja pildi suuruse muutmine optimaalsete mõõtmeteni enne selle meilile üleslaadimist.
- Vältige suuri taustapilte, mis võivad aeglustada meili laadimisaega.
- Animeeritud GIF-ide failimaht võib olla suurem kui staatilised pildid, kuna animatsiooni loomiseks on vaja mitu kaadrit. Hoidke neid kindlasti alla 1 Mb.