Fa'afefea ona Fa'aoga Ata Maualuluga mo Fa'aaliga Retina I lau Imeli HTML
Retina fa'aaliga o se fa'atauga fa'atauga fa'aaoga e apu e fa'amatala ai se fa'aaliga maualuga e maua ai le maualuga o le pika e le mafai ai e le mata o le tagata ona iloa le eseesega o pika ta'ito'atasi i se mamao e va'ai ai. O le fa'aaliga o le retina e masani lava ona i ai le pixel density o le 300 pixels i le inisi (ppi) poʻo le maualuga, lea e sili atu le maualuga nai lo se faʻaaliga masani ma le pika pika o le 72 ppi.
O fa'aaliga o le retina ua fa'aigoa nei mo fa'aaliga, komepiuta feavea'i, masini feavea'i, ma papa. O le tele o tagata gaosi oloa o loʻo ofoina atu nei faʻaaliga maualuga faʻatasi ma pixel densities e fetaui pe sili atu i faʻaaliga a Apple's Retina.
CSS e fa'aalia ai se ata maualuga maualuga mo se fa'aaliga Retina
E mafai ona e fa'aogaina le CSS code nei e uta ai se ata maualuga mo se fa'aaliga Retina. O lenei code e iloa ai le pixel density o le masini ma utaina le ata i le @ 2x suffix mo fa'aaliga Retina, a'o utaina le ata fa'ata'atia mo isi fa'aaliga.
@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');
}
O le isi auala o le faʻaaogaina o ata vector poʻo SVG ata, e mafai ona fua i so'o se iugafono e aunoa ma le leiloa o le lelei. O se fa'ata'ita'iga lenei:
<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>
I lenei faʻataʻitaʻiga, o le SVG code o loʻo faʻapipiʻi saʻo i le imeli HTML e faʻaaoga ai le <svg>
pine O le viewBox
uiga fa'amatalaina le tele o le ata SVG, a'o le xmlns
uiga fa'amaonia le XML namespace mo SVG.
le max-width
fanua ua seti i luga o le div
elemene e faʻamautinoa ai o le ata SVG e otometi lava ona fetaui ma le avanoa avanoa, e oʻo atu i le lautele maualuga o le 300px i lenei tulaga. Ole fa'ata'ita'iga sili lea mo le fa'amautinoaina ole fa'aalia lelei o ata SVG ile masini uma ma tagata fa'atau imeli.
Manatua: O le lagolago a le SVG e mafai ona fesuisuiaʻi e faʻatatau ile imeli meli, o lea e taua ai le suʻeina o lau imeli i luga o le tele o tagata faʻatau ina ia mautinoa o loʻo faʻaalia lelei le ata SVG.
O le isi auala e fa'ailoga ai imeli HTML mo fa'aaliga Retina o le fa'aoga srcset
. O le fa'aogaina o le uiga o le srcset e mafai ai ona e tu'uina atu ata maualuluga mo fa'aaliga Retina a'o fa'amautinoaina o lo'o fa'atulaga lelei ia ata mo masini la'ititi.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
I lenei faataitaiga, o le srcset
O le uiga e maua ai ata e lua: image.jpg
mo masini ma se iugafono o 600 pixels pe itiiti, ma image@2x.jpg
mo masini ma se iugafono o le 1200 pixels pe sili atu. O le 600w
ma 1200w
fa'amatala fa'amatala le tele o ata i pixels, lea e fesoasoani i le su'esu'ega e fuafua po'o fea ata e la'u mai e fa'atatau i le iugafono a le masini.
E le o tagata imeli uma e lagolagoina le srcset
uiga. Le maualuga o le lagolago mo srcset
e mafai ona fesuia'i lautele fa'alagolago i le tagata fa'atau imeli, o lea e taua ai le su'eina o au imeli i le tele o tagata fa'atau ina ia mautinoa o lo'o fa'aalia lelei ata.
HTML Mo Ata I Imeli Fa'atonuina Mo Fa'aaliga Retina
e mafai ona fa'ailoga se imeli HTML tali mai o le a fa'aalia lelei se ata i se fa'ai'uga ua fa'atatau mo fa'aaliga retina. O le auala lenei:
- Fausia se ata maualuga maualuga e faʻaluaina le tele o le ata moni e te manaʻo e faʻaalia i le imeli. Mo se faʻataʻitaʻiga, afai e te manaʻo e faʻaalia se ata 300 × 200, fai se ata 600 × 400.
- Faasaoina le ata maualuga i le @ 2x suffix. Mo se faʻataʻitaʻiga, afai o lau ata muamua image.png, fa'asaoina le fa'aaliga maualuga maualuga e pei o ata@2x.png.
- I lau HTML code imeli, faʻaoga le code lea e faʻaalia ai le ata:
<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)]>
ose fa'amatalaga tu'utu'uga e fa'aoga e fa'atatau i fa'amatalaga fa'apitoa o Microsoft Outlook, lea e fa'aogaina ai le Microsoft Word e tu'uina atu ai imeli HTML. Ole Microsoft Word's HTML rendering engine e mafai ona matua ese lava mai isi fa'atau imeli ma su'esu'ega i luga ole laiga, o lea e masani ona mana'omia ai le taulimaina fa'apitoa. O le
(gte mso 9)
siaki tulaga pe o le Microsoft Office version e sili atu pe tutusa ma le 9, lea e fetaui ma le Microsoft Office 2000. |(IE)
siaki tulaga pe afai o le kalani o Internet Explorer, lea e masani ona faʻaogaina e Microsoft Outlook. HTML Email ma le Retina Fa'aaliga Ata Fa'alelei
O se fa'ata'ita'iga lea o se fa'ailoga imeli HTML e fa'aalia ai se ata i se fa'ai'uga ua fa'atatauina mo fa'aaliga mata:
<!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 Fa'aali Ata Fautuaga
O nisi nei o fa'amatalaga fa'aopoopo i le fa'asilisiliina o au Imeli HTML mo ata fa'apitoa mo fa'aaliga Retina:
- Ia mautinoa ia i ai i taimi uma au pine ata e aofia ai le faʻaaogaina
alt
tusitusiga e maua ai le tala mo le ata. - Fa'alelei ata mo le upegatafa'ilagi e fa'aitiitia ai le tele o faila e aunoa ma le fa'afefeteina o ata. E mafai ona aofia ai le faʻaaogaina taofiofia o ata meafaigaluega, faʻaitiitia le numera o lanu faʻaaogaina i le ata, ma toe faʻaleleia le ata i ona fua sili ona lelei aʻo leʻi tuʻuina atu i le imeli.
- Aloese mai ata lapopoa i tua e mafai ona faagesegese ai taimi e ave ai imeli.
- Animated GIFs e mafai ona lapopoa i le faila faila nai lo ata faʻapitoa ona o le tele o faʻavaa e manaʻomia e fatu ai le animation, ia mautinoa e teu lelei i lalo ole 1 Mb.