Bii o ṣe le Lo Awọn aworan Ipinnu Giga fun Awọn ifihan Retina Ninu Imeeli HTML rẹ
Ifihan Retina jẹ ọrọ titaja ti a lo nipasẹ Apple lati ṣe apejuwe ifihan ti o ga ti o ni iwuwo piksẹli ti o ga to pe oju eniyan ko le ṣe iyatọ awọn piksẹli kọọkan ni aaye wiwo aṣoju. Ifihan retina ni igbagbogbo ni iwuwo piksẹli ti 300 awọn piksẹli fun inch (ppi) tabi ga julọ, eyiti o ga pupọ ju ifihan boṣewa lọ pẹlu iwuwo piksẹli ti 72 ppi.
Awọn ifihan Retina jẹ ojulowo ni bayi fun awọn ifihan, kọǹpútà alágbèéká, awọn ẹrọ alagbeka, ati awọn tabulẹti. Ọpọlọpọ awọn aṣelọpọ ni bayi nfunni awọn ifihan ti o ga-giga pẹlu awọn iwuwo pixel ti o baamu tabi kọja awọn ti awọn ifihan Retina Apple.
CSS Lati Ṣafihan Aworan Ipinnu Giga Fun Ifihan Retina kan
O le lo koodu CSS wọnyi lati gbe aworan ti o ga julọ fun ifihan Retina. Yi koodu iwari awọn ẹrọ ká piksẹli iwuwo ati èyà awọn aworan pẹlu awọn @ 2x suffix fun awọn ifihan Retina, lakoko ti o nrù aworan ipinnu-iwọn fun awọn ifihan miiran.
@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');
}
Ona miiran ni lati lo awọn eya fekito tabi SVG awọn aworan, eyiti o le ṣe iwọn si eyikeyi ipinnu laisi sisọnu didara. Eyi ni apẹẹrẹ:
<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>
Ni apẹẹrẹ yii, koodu SVG ti wa ni ifibọ taara ninu imeeli HTML nipa lilo awọn <svg>
taagi Awọn viewBox
ikalara asọye awọn iwọn ti SVG image, nigba ti xmlns
abuda kan pato aaye orukọ XML fun SVG.
awọn max-width
ohun ini ti ṣeto lori awọn div
eroja lati rii daju pe aworan SVG ṣe iwọn laifọwọyi lati baamu aaye to wa, to iwọn ti o pọju 300px ninu ọran yii. Eyi jẹ adaṣe ti o dara julọ fun idaniloju pe awọn aworan SVG han daradara lori gbogbo awọn ẹrọ ati awọn alabara imeeli.
akiyesi: Atilẹyin SVG le yatọ si da lori alabara imeeli, nitorina o ṣe pataki lati ṣe idanwo imeeli rẹ lori ọpọlọpọ awọn onibara lati rii daju pe aworan SVG ti han daradara.
Ọna miiran ti ifaminsi awọn imeeli HTML fun awọn ifihan Retina ni lati lo srcset
. Lilo abuda srcset ngbanilaaye lati pese awọn aworan ti o ga fun awọn ifihan Retina lakoko ti o rii daju pe awọn aworan ti ni iwọn daradara fun awọn ẹrọ ipinnu kekere.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Ninu apẹẹrẹ yii, awọn srcset
Iwa pese awọn orisun aworan meji: image.jpg
fun awọn ẹrọ pẹlu ipinnu ti 600 awọn piksẹli tabi kere si, ati image@2x.jpg
fun awọn ẹrọ pẹlu ipinnu ti 1200 awọn piksẹli tabi diẹ ẹ sii. Awọn 600w
ati 1200w
awọn asọye pato iwọn awọn aworan ni awọn piksẹli, eyiti o ṣe iranlọwọ fun aṣawakiri lati pinnu iru aworan lati ṣe igbasilẹ da lori ipinnu ẹrọ naa.
Kii ṣe gbogbo awọn alabara imeeli ṣe atilẹyin fun srcset
ikalara. Ipele atilẹyin fun srcset
le yatọ si pupọ da lori alabara imeeli, nitorinaa o ṣe pataki lati ṣe idanwo awọn imeeli rẹ lori awọn alabara lọpọlọpọ lati rii daju pe awọn aworan han daradara.
HTML Fun Awọn aworan Ni Imeeli Iṣapeye Fun Awọn ifihan Retina
o ṣee ṣe lati ṣe koodu imeeli HTML idahun ti yoo ṣe afihan aworan daradara ni ipinnu iṣapeye fun awọn ifihan retina. Eyi ni bii:
- Ṣẹda aworan ti o ga ti o jẹ ilọpo meji ti aworan gangan ti o fẹ lati han ninu imeeli. Fun apẹẹrẹ, ti o ba fẹ ṣe afihan aworan 300×200, ṣẹda aworan 600×400 kan.
- Fi awọn ga-o ga aworan pẹlu awọn @ 2x suffic. Fun apẹẹrẹ, ti aworan atilẹba rẹ ba jẹ image.png, fi awọn ga-o ga version bi aworan @ 2x.png.
- Ninu koodu imeeli HTML rẹ, lo koodu atẹle lati ṣe afihan aworan naa:
<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)]>
jẹ asọye àídájú ti a lo lati fojusi awọn ẹya kan pato ti Microsoft Outlook, eyiti o nlo Ọrọ Microsoft lati ṣe awọn imeeli HTML. Enjini Rendering HTML Ọrọ Microsoft le yatọ pupọ si awọn alabara imeeli miiran ati awọn aṣawakiri wẹẹbu, nitorinaa o nilo mimu pataki nigbagbogbo. Awọn
(gte mso 9)
awọn sọwedowo ipo ti ẹya Microsoft Office ba tobi ju tabi dọgba si 9, eyiti o baamu si Microsoft Office 2000. Awọn |(IE)
awọn sọwedowo ipo ti alabara jẹ Internet Explorer, eyiti Microsoft Outlook nigbagbogbo lo. Imeeli HTML Pẹlu Ifihan Retina Iṣapeye Awọn aworan
Eyi ni apẹẹrẹ ti koodu imeeli HTML ti o ṣe idahun ti o ṣafihan aworan kan ni ipinnu iṣapeye fun awọn ifihan retina:
<!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>
Awọn imọran Aworan Ifihan Retina
Eyi ni diẹ ninu awọn imọran afikun lori jijẹ Awọn imeeli HTML rẹ fun awọn aworan iṣapeye fun awọn ifihan Retina:
- Rii daju pe nigbagbogbo ni awọn afi aami aworan rẹ pẹlu lilo
alt
ọrọ lati pese aaye fun aworan naa. - Mu awọn aworan dara si oju opo wẹẹbu lati dinku iwọn faili laisi ibajẹ didara aworan. Eyi le pẹlu lilo funmorawon aworan awọn irinṣẹ, idinku nọmba awọn awọ ti a lo ninu aworan naa, ati yiyipada aworan si awọn iwọn to dara julọ ṣaaju ikojọpọ si imeeli.
- Yago fun awọn aworan abẹlẹ nla ti o le fa fifalẹ awọn akoko fifuye imeeli.
- Awọn GIF ti ere idaraya le tobi ni iwọn faili ju awọn aworan aimi lọ nitori ọpọlọpọ awọn fireemu ti o nilo lati ṣẹda ere idaraya, rii daju pe o tọju wọn daradara labẹ 1 Mb.