Yuav Siv Cov Duab Zoo Li Cas rau Retina Qhia Hauv Koj Tus Email HTML
Retina zaub yog ib lo lus lag luam siv los ntawm Kua los piav qhia txog cov kev daws teeb meem siab uas muaj pixel ceev siab txaus uas tib neeg lub qhov muag tsis tuaj yeem paub qhov txawv ntawm ib tus neeg pixels ntawm qhov pom kev deb. Lub retina zaub feem ntau muaj pixel ceev ntawm 300 pixels ib nti (ppi) lossis siab dua, uas yog siab dua li cov qauv zaub nrog pixel ceev ntawm 72 ppi.
Retina cov lus tam sim no yog qhov tseem ceeb heev rau cov lus qhia, laptops, mobile devices, thiab ntsiav tshuaj. Ntau lub tuam txhab tam sim no muab cov kev daws teeb meem siab nrog pixel ntom ntom uas phim lossis tshaj li ntawm Apple's Retina zaub.
CSS los tso saib cov duab daws teeb meem siab dua rau Retina zaub
Koj tuaj yeem siv cov lej CSS hauv qab no los thauj cov duab siab rau Retina zaub. Cov cai no ntes cov cuab yeej pixel ceev thiab thauj cov duab nrog rau @2x Lub ntsiab lus rau Retina cov lus qhia, thaum thauj cov duab daws teeb meem rau lwm cov duab.
@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');
}
Lwm txoj hauv kev yog siv cov duab vector lossis SVG dluab, uas tuaj yeem ntsuas rau txhua qhov kev daws teeb meem yam tsis tau poob zoo. Nov yog ib qho piv txwv:
<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>
Hauv qhov piv txwv no, SVG code yog kos ncaj qha rau hauv HTML email siv lub <svg>
tag. Cov viewBox
attribute txhais qhov ntev ntawm SVG duab, thaum lub xmlns
attribute qhia lub XML namespace rau SVG.
cov max-width
khoom yog teem rau ntawm div
lub caij los xyuas kom meej tias SVG cov duab ntsuas tau ua kom haum rau qhov chaw muaj, mus txog qhov siab tshaj plaws ntawm 300px hauv qhov no. Qhov no yog qhov kev coj ua zoo tshaj plaws los xyuas kom meej tias SVG cov duab tau tso tawm kom pom zoo ntawm txhua yam khoom siv thiab cov neeg siv email.
Nco ntsoov: SVG kev txhawb nqa tuaj yeem sib txawv nyob ntawm tus neeg siv email, yog li nws tseem ceeb heev rau kev sim koj tus email ntawm ntau tus neeg siv khoom kom ntseeg tau tias SVG duab tau tso tawm kom pom zoo.
Lwm txoj hauv kev ntawm coding HTML emails rau Retina zaub yog siv srcset
. Siv tus cwj pwm srcset tso cai rau koj los muab cov duab daws teeb meem siab rau Retina cov lus qhia thaum ua kom cov dluab muaj qhov loj me rau cov khoom siv qis dua.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Hauv qhov ua piv txwv, tus srcset
attribute muab ob qhov chaw duab: image.jpg
rau cov khoom siv nrog kev daws teeb meem ntawm 600 pixels lossis tsawg dua, thiab image@2x.jpg
rau cov khoom siv nrog kev daws teeb meem ntawm 1200 pixels lossis ntau dua. Cov 600w
thiab 1200w
Cov lus piav qhia qhia qhov loj ntawm cov duab hauv pixels, uas pab tus browser txiav txim siab seb cov duab twg rub tawm raws li lub cuab yeej daws teeb meem.
Tsis yog txhua tus neeg siv email txhawb nqa srcset
tus cwj pwm. Qib ntawm kev txhawb nqa rau srcset
tuaj yeem sib txawv nyob ntawm tus neeg siv email, yog li nws yog ib qho tseem ceeb uas yuav tau sim koj cov emails ntawm ntau tus neeg siv los xyuas kom meej tias cov duab pom zoo.
HTML Rau Cov Duab Hauv Email Optimized Rau Retina Zaub
Nws muaj peev xwm los sau cov lus teb HTML email uas yuav ua kom pom cov duab zoo ntawm qhov kev daws teeb meem zoo rau cov duab retina. Nov yog li cas:
- Tsim cov duab siab uas yog ob npaug ntawm qhov loj ntawm cov duab tiag tiag uas koj xav tso rau hauv email. Piv txwv li, yog tias koj xav tso duab 300 × 200, tsim ib daim duab 600 × 400.
- Txuag cov duab siab nrog cov @2x lus. Piv txwv li, yog tias koj daim duab qub image.png, txuag lub high-resolution version li image@2x.png.
- Hauv koj li HTML email code, siv cov cai hauv qab no los tso saib cov duab:
<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)]>
yog cov lus pom zoo uas siv los tsom rau cov qauv tshwj xeeb ntawm Microsoft Outlook, uas siv Microsoft Word los ua HTML emails. Microsoft Word's HTML rendering engine tuaj yeem txawv ntawm lwm tus neeg siv email thiab web browsers, yog li nws feem ntau xav tau kev tuav tshwj xeeb. Cov
(gte mso 9)
Kev kuaj xyuas yog tias Microsoft Office version ntau dua lossis sib npaug rau 9, uas sib haum rau Microsoft Office 2000. |(IE)
Kev kuaj xyuas yog tias tus neeg siv yog Internet Explorer, uas feem ntau siv los ntawm Microsoft Outlook. HTML Email Nrog Retina Zaub Optimized Duab
Nov yog ib qho piv txwv ntawm cov lus teb HTML email code uas qhia cov duab ntawm qhov kev daws teeb meem zoo rau cov duab 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>
Retina Display Cov Lus Qhia Duab
Nov yog qee cov lus qhia ntxiv txog kev txhim kho koj cov HTML Emails rau cov duab zoo rau Retina zaub:
- Nco ntsoov ib txwm muaj koj cov duab cim npe suav nrog kev siv
alt
ntawv los muab cov ntsiab lus teb rau daim duab. - Txhim kho cov duab zoo rau lub vev xaib kom txo cov ntaub ntawv loj yam tsis muaj kev cuam tshuam cov duab zoo. Qhov no tuaj yeem suav nrog kev siv zaws thaij cov cuab yeej, txo tus naj npawb ntawm cov xim siv hauv daim duab, thiab resizing cov duab rau nws qhov ntev kom pom zoo ua ntej upload rau email.
- Zam cov duab tom qab loj uas tuaj yeem ua rau qeeb email thauj sijhawm.
- Animated GIFs tuaj yeem loj dua hauv cov ntaub ntawv loj dua li cov duab zoo li qub vim muaj ntau lub thav duab xav tau los tsim cov animation, nco ntsoov khaws lawv zoo hauv qab 1 Mb.