Paano Gumamit ng High-Resolution na Mga Larawan para sa Mga Retina Display Sa Iyong HTML na Email
Ang Retina display ay isang termino sa marketing na ginagamit ng mansanas upang ilarawan ang isang high-resolution na display na may pixel density na sapat na mataas na ang mata ng tao ay hindi matukoy ang mga indibidwal na pixel sa isang tipikal na distansya ng pagtingin. Ang isang retina display ay karaniwang may pixel density na 300 pixels per inch (ppi) o mas mataas, na mas mataas kaysa sa karaniwang display na may pixel density na 72 ppi.
Medyo mainstream na ngayon ang mga retina display para sa mga display, laptop, mobile device, at tablet. Nag-aalok na ngayon ang maraming manufacturer ng mga high-resolution na display na may mga pixel density na tumutugma o lumalampas sa mga display ng Retina ng Apple.
CSS Para Magpakita ng Mas Mataas na Resolution na Imahe Para sa Retina Display
Magagamit mo ang sumusunod na CSS code para mag-load ng high-resolution na imahe para sa Retina display. Nakikita ng code na ito ang pixel density ng device at nilo-load ang larawan gamit ang @ 2x suffix para sa mga Retina display, habang nilo-load ang standard-resolution na imahe para sa iba pang mga display.
@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');
}
Ang isa pang diskarte ay ang paggamit ng vector graphics o SVG mga larawan, na maaaring mag-scale sa anumang resolution nang hindi nawawala ang kalidad. Narito ang isang halimbawa:
<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>
Sa halimbawang ito, ang SVG code ay direktang naka-embed sa HTML na email gamit ang <svg>
tag Ang viewBox
Ang attribute ay tumutukoy sa mga sukat ng SVG na imahe, habang ang xmlns
Tinutukoy ng attribute ang XML namespace para sa SVG.
Ang max-width
ari-arian ay nakatakda sa div
elemento upang matiyak na ang imahe ng SVG ay awtomatikong nag-i-scale upang magkasya sa magagamit na espasyo, hanggang sa maximum na lapad na 300px sa kasong ito. Ito ay isang pinakamahusay na kasanayan para sa pagtiyak na ang mga SVG na imahe ay ipinapakita nang maayos sa lahat ng mga device at email client.
tandaan: Maaaring mag-iba ang suporta sa SVG depende sa email client, kaya mahalagang subukan ang iyong email sa maraming kliyente upang matiyak na ang SVG na imahe ay ipinapakita nang maayos.
Ang isa pang paraan ng pag-coding ng mga HTML na email para sa mga Retina display ay ang paggamit srcset
. Ang paggamit ng attribute na srcset ay nagbibigay-daan sa iyong magbigay ng mga larawang may mataas na resolution para sa mga Retina display habang tinitiyak na ang mga larawan ay wastong sukat para sa mga device na may mababang resolusyon.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Sa halimbawang ito, ang srcset
Ang attribute ay nagbibigay ng dalawang pinagmumulan ng larawan: image.jpg
para sa mga device na may resolution na 600 pixels o mas mababa, at image@2x.jpg
para sa mga device na may resolution na 1200 pixels o higit pa. Ang 600w
at 1200w
Tinutukoy ng mga deskriptor ang laki ng mga larawan sa mga pixel, na tumutulong sa browser na matukoy kung aling larawan ang ida-download batay sa resolution ng device.
Hindi lahat ng email client ay sumusuporta sa srcset
katangian. Ang antas ng suporta para sa srcset
maaaring mag-iba-iba nang malaki depende sa email client, kaya mahalagang subukan ang iyong mga email sa maraming kliyente upang matiyak na ang mga larawan ay ipinapakita nang maayos.
HTML Para sa Mga Larawan Sa Email na Na-optimize Para sa Retina Display
posibleng mag-code ng tumutugon na HTML email na magpapakita ng isang imahe sa isang resolution na na-optimize para sa mga retina display. Ganito:
- Gumawa ng larawang may mataas na resolution na doble ang laki ng aktwal na larawang gusto mong ipakita sa email. Halimbawa, kung gusto mong magpakita ng 300×200 na imahe, lumikha ng 600×400 na imahe.
- I-save ang high-resolution na imahe gamit ang @ 2x panlapi. Halimbawa, kung ang iyong orihinal na larawan ay image.png, i-save ang high-resolution na bersyon bilang image@2x.png.
- Sa iyong HTML na email code, gamitin ang sumusunod na code upang ipakita ang larawan:
<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)]>
ay isang kondisyong komento na ginagamit upang i-target ang mga partikular na bersyon ng Microsoft Outlook, na gumagamit ng Microsoft Word upang mag-render ng mga HTML na email. Ang HTML rendering engine ng Microsoft Word ay maaaring ibang-iba sa ibang mga email client at web browser, kaya madalas itong nangangailangan ng espesyal na paghawak. Ang
(gte mso 9)
sinusuri ng kundisyon kung ang bersyon ng Microsoft Office ay mas malaki sa o katumbas ng 9, na tumutugma sa Microsoft Office 2000. Ang |(IE)
sinusuri ng kundisyon kung ang kliyente ay Internet Explorer, na kadalasang ginagamit ng Microsoft Outlook. HTML Email na May Retina Display Optimized na Mga Larawan
Narito ang isang halimbawa ng tumutugong HTML na email code na nagpapakita ng larawan sa isang resolution na na-optimize para sa mga retina display:
<!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>
Mga Tip sa Retina Display Image
Narito ang ilang karagdagang tip sa pag-optimize ng iyong mga HTML Email para sa mga larawang na-optimize para sa mga Retina display:
- Tiyaking palaging may kasamang paggamit ang iyong mga tag ng larawan
alt
teksto upang magbigay ng konteksto para sa larawan. - I-optimize ang mga larawan para sa web upang bawasan ang laki ng file nang hindi nakompromiso ang kalidad ng larawan. Maaaring kabilang dito ang paggamit compression ng imahe tool, binabawasan ang bilang ng mga kulay na ginamit sa larawan, at pagbabago ng laki ng larawan sa pinakamainam na sukat nito bago ito i-upload sa email.
- Iwasan ang malalaking larawan sa background na maaaring makapagpabagal sa mga oras ng pag-load ng email.
- Ang mga animated na GIF ay maaaring mas malaki sa laki ng file kaysa sa mga static na larawan dahil sa maraming mga frame na kailangan upang gawin ang animation, siguraduhing panatilihing mabuti ang mga ito sa ilalim ng 1 Mb.