Sut i Ddefnyddio Delweddau Cydraniad Uchel ar gyfer Arddangosfeydd Retina Yn Eich E-bost HTML
Mae arddangosiad retina yn derm marchnata a ddefnyddir gan Afal i ddisgrifio arddangosfa cydraniad uchel sydd â dwysedd picsel sy'n ddigon uchel fel nad yw'r llygad dynol yn gallu gwahaniaethu rhwng picsel unigol ar bellter gwylio arferol. Fel arfer mae gan arddangosiad retina ddwysedd picsel o 300 picsel y fodfedd (ppi) neu uwch, sy'n sylweddol uwch nag arddangosfa safonol gyda dwysedd picsel o 72 ppi.
Mae arddangosfeydd retina bellach yn eithaf prif ffrwd ar gyfer arddangosfeydd, gliniaduron, dyfeisiau symudol a thabledi. Mae llawer o weithgynhyrchwyr bellach yn cynnig arddangosfeydd cydraniad uchel gyda dwysedd picsel sy'n cyfateb neu'n rhagori ar rai o arddangosfeydd Retina Apple.
CSS I Arddangos Delwedd Cydraniad Uwch Ar Gyfer Arddangosfa Retina
Gallwch ddefnyddio'r cod CSS canlynol i lwytho delwedd cydraniad uchel ar gyfer arddangosfa Retina. Mae'r cod hwn yn canfod dwysedd picsel y ddyfais ac yn llwytho'r ddelwedd gyda'r @2x ôl-ddodiad ar gyfer arddangosfeydd Retina, wrth lwytho'r ddelwedd cydraniad safonol ar gyfer arddangosfeydd eraill.
@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');
}
Dull arall yw defnyddio graffeg fector neu SVG delweddau, a all raddfa i unrhyw gydraniad heb golli ansawdd. Dyma enghraifft:
<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>
Yn yr enghraifft hon, mae'r cod SVG wedi'i fewnosod yn uniongyrchol yn yr e-bost HTML gan ddefnyddio'r <svg>
tag. Mae'r viewBox
priodoledd yn diffinio dimensiynau'r ddelwedd SVG, tra bod y xmlns
priodoledd yn pennu gofod enw XML ar gyfer SVG.
Mae adroddiadau max-width
eiddo yn cael ei osod ar y div
elfen i sicrhau bod y ddelwedd SVG graddfeydd yn awtomatig i ffitio'r gofod sydd ar gael, hyd at uchafswm lled o 300px yn yr achos hwn. Mae hwn yn arfer gorau ar gyfer sicrhau bod delweddau SVG yn cael eu harddangos yn iawn ar bob dyfais a chleient e-bost.
Nodyn: Gall cefnogaeth SVG amrywio yn dibynnu ar y cleient e-bost, felly mae'n bwysig profi eich e-bost ar gleientiaid lluosog i sicrhau bod y ddelwedd SVG yn cael ei harddangos yn iawn.
Ffordd arall o godio e-byst HTML ar gyfer arddangosiadau Retina yw defnyddio srcset
. Mae defnyddio priodoledd srcset yn caniatáu ichi ddarparu delweddau cydraniad uchel ar gyfer arddangosiadau Retina wrth sicrhau bod y delweddau o'r maint cywir ar gyfer dyfeisiau cydraniad is.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Yn yr enghraifft hon, mae'r srcset
mae priodoledd yn darparu dwy ffynhonnell ddelwedd: image.jpg
ar gyfer dyfeisiau â chydraniad o 600 picsel neu lai, a image@2x.jpg
ar gyfer dyfeisiau gyda chydraniad o 1200 picsel neu fwy. Mae'r 600w
a 1200w
mae disgrifyddion yn nodi maint y delweddau mewn picseli, sy'n helpu'r porwr i benderfynu pa ddelwedd i'w lawrlwytho yn seiliedig ar gydraniad y ddyfais.
Nid yw pob cleient e-bost yn cefnogi'r srcset
priodoledd. Lefel y gefnogaeth ar gyfer srcset
Gall amrywio'n fawr yn dibynnu ar y cleient e-bost, felly mae'n bwysig profi eich e-byst ar gleientiaid lluosog i sicrhau bod y delweddau'n cael eu harddangos yn gywir.
HTML Ar gyfer Delweddau Mewn E-bost Wedi'i Optimeiddio Ar Gyfer Arddangosfeydd Retina
mae'n bosibl codio e-bost HTML ymatebol a fydd yn arddangos delwedd yn gywir ar gydraniad sydd wedi'i optimeiddio ar gyfer arddangosiadau retina. Dyma sut:
- Creu delwedd cydraniad uchel sy'n ddwbl maint y ddelwedd wirioneddol rydych chi am ei harddangos yn yr e-bost. Er enghraifft, os ydych chi am arddangos delwedd 300 × 200, crëwch ddelwedd 600 × 400.
- Arbedwch y ddelwedd cydraniad uchel gyda'r @2x ôl-ddodiad. Er enghraifft, os yw eich delwedd wreiddiol image.png, arbedwch y fersiwn cydraniad uchel fel delwedd@2x.png.
- Yn eich cod e-bost HTML, defnyddiwch y cod canlynol i arddangos y ddelwedd:
<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)]>
yn sylw amodol a ddefnyddir i dargedu fersiynau penodol o Microsoft Outlook, sy'n defnyddio Microsoft Word i rendro negeseuon e-bost HTML. Gall peiriant rendro HTML Microsoft Word fod yn dra gwahanol i gleientiaid e-bost a phorwyr gwe eraill, felly mae angen ei drin yn arbennig yn aml. Mae'r
(gte mso 9)
yn gwirio cyflwr a yw fersiwn Microsoft Office yn fwy na neu'n hafal i 9, sy'n cyfateb i Microsoft Office 2000. |(IE)
gwirio cyflwr os yw'r cleient yn Internet Explorer, a ddefnyddir yn aml gan Microsoft Outlook. E-bost HTML Gyda Retina Arddangos Delweddau Optimized
Dyma enghraifft o god e-bost HTML ymatebol sy'n dangos delwedd ar gydraniad sydd wedi'i optimeiddio ar gyfer arddangosiadau 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>
Awgrymiadau Delwedd Arddangos Retina
Dyma rai awgrymiadau ychwanegol ar wneud y gorau o'ch E-byst HTML ar gyfer delweddau sydd wedi'u optimeiddio ar gyfer arddangosfeydd Retina:
- Gwnewch yn siŵr bod eich tagiau delwedd bob amser yn cynnwys defnyddio
alt
testun i ddarparu cyd-destun ar gyfer y ddelwedd. - Optimeiddio delweddau ar gyfer y we i leihau maint y ffeil heb gyfaddawdu ansawdd delwedd. Gall hyn gynnwys defnyddio cywasgu delweddau offer, lleihau nifer y lliwiau a ddefnyddir yn y ddelwedd, a newid maint y ddelwedd i'w dimensiynau gorau posibl cyn ei huwchlwytho i'r e-bost.
- Osgoi delweddau cefndir mawr a all arafu amseroedd llwytho e-bost.
- Gall GIFs animeiddiedig fod yn fwy o ran maint ffeil na delweddau statig oherwydd y fframiau lluosog sydd eu hangen i greu'r animeiddiad, gwnewch yn siŵr eu cadw ymhell o dan 1 Mb.