Yadda Ake Amfani da Hotunan Maɗaukakin Maɗaukakin Maɗaukakin Maɗaukaki don Nuni na Ritina A cikin Imel ɗin ku na HTML
Nunin retina kalmar talla ce da ake amfani da ita apple don bayyana babban nuni wanda ke da girman girman pixel wanda idon ɗan adam ya kasa bambance pixels guda ɗaya a tazarar kallo. Nunin retina yawanci yana da nauyin pixel na 300 pixels a kowace inch (ppi) ko mafi girma, wanda ya fi girma fiye da daidaitaccen nuni tare da ƙimar pixel na 72 ppi.
Nunin retina yanzu sun zama na al'ada don nuni, kwamfyutoci, na'urorin hannu, da allunan. Yawancin masana'antun yanzu suna ba da nuni mai ƙima tare da ƙimar pixel waɗanda suka dace ko wuce na nunin Retina na Apple.
CSS Don Nuna Hoton Maɗaukakin Maɗaukakin Maɗaukaki Don Nuni na Ritina
Kuna iya amfani da lambar CSS mai zuwa don loda hoto mai tsayi don nunin Retina. Wannan lambar tana gano ƙimar pixel na na'urar kuma tana loda hoton tare da @ 2x kari don nunin Retina, yayin loda madaidaicin hoto don sauran nunin.
@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');
}
Wata hanyar ita ce amfani da zane-zane na vector ko SVG hotuna, wanda zai iya daidaitawa zuwa kowane ƙuduri ba tare da rasa inganci ba. Ga misali:
<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>
A cikin wannan misali, an saka lambar SVG kai tsaye a cikin imel ɗin HTML ta amfani da <svg>
alama. The viewBox
sifa ta bayyana girman hoton SVG, yayin da xmlns
sifa ta ƙayyade sararin sunan XML don SVG.
The max-width
an saita dukiya akan div
kashi don tabbatar da cewa hoton SVG yana yin awo ta atomatik don dacewa da sararin samaniya, har zuwa matsakaicin faɗin 300px a wannan yanayin. Wannan shine mafi kyawun aiki don tabbatar da cewa an nuna hotunan SVG da kyau akan duk na'urori da abokan cinikin imel.
lura: Tallafin SVG na iya bambanta dangane da abokin ciniki na imel, don haka yana da mahimmanci a gwada imel ɗin ku akan abokan ciniki da yawa don tabbatar da cewa an nuna hoton SVG yadda ya kamata.
Wata hanyar coding imel ɗin HTML don nunin Retina ita ce amfani srcset
. Yin amfani da sifa srcset yana ba ku damar samar da hotuna masu ƙima don nunin Retina yayin da tabbatar da cewa hotunan suna da girman da ya dace don ƙananan na'urori masu ƙuduri.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
A cikin wannan misalin, da srcset
sifa ta samar da tushen hoto guda biyu: image.jpg
don na'urori masu ƙudurin pixels 600 ko ƙasa da haka, kuma image@2x.jpg
don na'urori masu ƙudurin pixels 1200 ko fiye. The 600w
da kuma 1200w
masu siffantawa suna ƙayyade girman hotuna a cikin pixels, wanda ke taimaka wa mai bincike ya tantance ko wane hoton zai zazzage bisa ƙudurin na'urar.
Ba duk abokan ciniki na imel ke goyan bayan srcset
sifa. Matsayin tallafi don srcset
na iya bambanta ko'ina dangane da abokin ciniki na imel, don haka yana da mahimmanci a gwada imel ɗinku akan abokan ciniki da yawa don tabbatar da cewa an nuna hotunan yadda yakamata.
HTML Don Hotuna A cikin Imel An inganta don Nuni na Retina
yana yiwuwa a ƙididdige imel ɗin HTML mai amsa wanda zai nuna hoto da kyau a ƙudurin da aka inganta don nunin ido. Ga yadda:
- Ƙirƙirar hoto mai girma wanda ya ninka girman ainihin hoton da kake son nunawa a cikin imel. Misali, idan kuna son nuna hoton 300×200, ƙirƙirar hoto 600×400.
- Ajiye babban hoto tare da @ 2x kari. Misali, idan hotonku na asali shine image.png, ajiye babban ƙudurin sigar azaman hoto@2x.png.
- A cikin lambar imel ɗin ku ta HTML, yi amfani da lambar mai zuwa don nuna hoton:
<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)]>
sharhi ne na sharadi wanda ake amfani da shi don niyya takamaiman nau'ikan Microsoft Outlook, wanda ke amfani da Microsoft Word don yin imel ɗin HTML. Injin sarrafa HTML na Microsoft Word na iya bambanta sosai da sauran abokan cinikin imel da masu binciken gidan yanar gizo, don haka galibi yana buƙatar kulawa ta musamman. The
(gte mso 9)
yanayin yana bincika idan nau'in Microsoft Office ya fi ko daidai da 9, wanda yayi daidai da Microsoft Office 2000. |(IE)
yanayin yana bincika idan abokin ciniki shine Internet Explorer, wanda Microsoft Outlook galibi ke amfani dashi. Imel na HTML Tare da Ingantattun Hotunan Retina
Ga misalin lambar imel ɗin HTML mai amsawa wanda ke nuna hoto a ƙudurin da aka inganta don nunin 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>
Tukwici na Nuni na retina
Anan akwai ƙarin nasihu akan inganta Imel ɗinku na HTML don hotunan da aka inganta don nunin Retina:
- Tabbatar cewa koyaushe ana haɗa alamun alamun hotonku da amfani
alt
rubutu don samar da mahallin hoton. - Haɓaka hotuna don gidan yanar gizo don rage girman fayil ba tare da lalata ingancin hoto ba. Wannan na iya haɗawa da amfani matsin lambar kayan aiki, rage adadin launuka da ake amfani da su a cikin hoton, da kuma mayar da hoton zuwa mafi girman girmansa kafin loda shi zuwa imel.
- Guji manyan hotunan bango waɗanda zasu iya rage lokutan lodin imel.
- GIF masu rai na iya zama mafi girma cikin girman fayil fiye da hotuna masu tsattsauran ra'ayi saboda firam ɗin da yawa da ake buƙata don ƙirƙirar motsin, tabbatar da kiyaye su da kyau a ƙarƙashin 1 Mb.