በኤችቲኤምኤል ኢሜልዎ ውስጥ ለሬቲና ማሳያዎች ባለከፍተኛ ጥራት ምስሎችን እንዴት መጠቀም እንደሚቻል
ሬቲና ማሳያ የሚጠቀመው የግብይት ቃል ነው። Apple የሰው ዓይን በተለመደው የእይታ ርቀት ላይ ነጠላ ፒክስሎችን መለየት የማይችል ከፍተኛ የፒክሰል ጥግግት ያለው ባለከፍተኛ ጥራት ማሳያን ለመግለጽ። የሬቲና ማሳያ በተለምዶ የፒክሰል ጥግግት 300 ፒክስል በአንድ ኢንች አለው (ፒ ፒ) ወይም ከዚያ በላይ፣ ይህም ከመደበኛ ማሳያ 72 ፒፒአይ የፒክሰል መጠጋጋት ጋር በእጅጉ ከፍ ያለ ነው።
የሬቲና ማሳያዎች አሁን ለዕይታዎች፣ ላፕቶፖች፣ ተንቀሳቃሽ መሣሪያዎች እና ታብሌቶች ዋና ዋና ናቸው። ብዙ አምራቾች አሁን ከአፕል ሬቲና ማሳያዎች ጋር የሚዛመዱ ወይም የሚበልጡ የፒክሰል እፍጋቶች ያላቸው ባለከፍተኛ ጥራት ማሳያዎችን ያቀርባሉ።
CSS ለሬቲና ማሳያ ከፍተኛ ጥራት ያለው ምስል ለማሳየት
ለሬቲና ማሳያ ከፍተኛ ጥራት ያለው ምስል ለመጫን የሚከተለውን የሲኤስኤስ ኮድ መጠቀም ይችላሉ። ይህ ኮድ የመሳሪያውን የፒክሰል መጠን ይገነዘባል እና ምስሉን በ @2x ለሬቲና ማሳያዎች ቅጥያ፣ መደበኛ ጥራት ያለው ምስል ለሌሎች ማሳያዎች በሚጫንበት ጊዜ።
@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');
}
ሌላው አቀራረብ የቬክተር ግራፊክስን መጠቀም ወይም የ SVG ምስሎች፣ ጥራቱን ሳያጡ ወደ ማንኛውም ጥራት ሊመዘኑ ይችላሉ። አንድ ምሳሌ ይኸውና፡-
<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>
በዚህ ምሳሌ፣ የSVG ኮድ በኤችቲኤምኤል ኢሜል ውስጥ በቀጥታ ተካትቷል። <svg>
መለያ ዘ viewBox
አይነታ የ SVG ምስል ልኬቶችን ይገልፃል, የ xmlns
ባህሪው ለኤስቪጂ የኤክስኤምኤል ስም ቦታን ይገልጻል።
የ max-width
ንብረት በ ላይ ተዘጋጅቷል div
ኤለመንት የSVG ምስል ካለው ቦታ ጋር እንዲገጣጠም በራስ-ሰር እንደሚመዘን ፣በዚህ አጋጣሚ እስከ ከፍተኛው 300px ስፋት። ይህ የSVG ምስሎች በሁሉም መሳሪያዎች እና የኢሜል ደንበኞች ላይ በትክክል እንዲታዩ ለማድረግ በጣም ጥሩው አሰራር ነው።
ማስታወሻ: የኤስቪጂ ድጋፍ እንደ ኢሜል ደንበኛ ሊለያይ ይችላል።ስለዚህ የኤስቪጂ ምስል በትክክል መታየቱን ለማረጋገጥ ኢሜልዎን በበርካታ ደንበኞች ላይ መሞከር አስፈላጊ ነው።
ሌላው የኤችቲኤምኤል ኢሜይሎችን ለሬቲና ማሳያዎች ኮድ ማድረግ የሚቻልበት መንገድ መጠቀም ነው። srcset
. የ srcset ባህሪን መጠቀም ለሬቲና ማሳያዎች ከፍተኛ ጥራት ያላቸውን ምስሎች እንዲያቀርቡ ይፈቅድልዎታል እንዲሁም ምስሎቹ ዝቅተኛ ጥራት ላላቸው መሣሪያዎች በትክክል መጠናቸው።
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
በዚህ ምሳሌ ውስጥ እ.ኤ.አ. srcset
ባህሪው ሁለት የምስል ምንጮችን ይሰጣል image.jpg
600 ፒክስል ወይም ከዚያ ያነሰ ጥራት ላላቸው መሣሪያዎች እና image@2x.jpg
1200 ፒክስል ወይም ከዚያ በላይ ጥራት ላላቸው መሣሪያዎች። የ 600w
ና 1200w
ገላጭዎች የምስሎቹን መጠን በፒክሰሎች ይገልጻሉ፣ ይህም አሳሹ በመሣሪያው ጥራት ላይ በመመስረት የትኛውን ምስል ማውረድ እንዳለበት ለመወሰን ይረዳል።
ሁሉም የኢሜል ደንበኞች አይደግፉም srcset
ባህሪ. የድጋፍ ደረጃ ለ srcset
እንደ ኢሜል ደንበኛው በስፋት ሊለያይ ይችላል, ስለዚህ ምስሎቹ በትክክል እንዲታዩ ኢሜይሎችዎን በበርካታ ደንበኞች ላይ መሞከር አስፈላጊ ነው.
ኤችቲኤምኤል ለኢሜል ምስሎች የተመቻቸ ለሬቲና ማሳያዎች
ለሬቲና ማሳያዎች በተመቻቸ ጥራት ላይ ምስልን በትክክል የሚያሳይ ምላሽ የሚሰጥ HTML ኢሜይል ኮድ ማድረግ ይቻላል። እንዴት እንደሆነ እነሆ፡-
- በኢሜል ውስጥ ለማሳየት ከሚፈልጉት ትክክለኛ ምስል በእጥፍ የሚበልጥ ባለከፍተኛ ጥራት ምስል ይፍጠሩ። ለምሳሌ 300×200 ምስል ማሳየት ከፈለጉ 600×400 ምስል ይፍጠሩ።
- ባለ ከፍተኛ ጥራት ምስሉን ያስቀምጡ @2x ቅጥያ. ለምሳሌ, የእርስዎ የመጀመሪያ ምስል ከሆነ image.png, ከፍተኛ ጥራት ያለውን ስሪት ያስቀምጡ እንደ ምስል@2x.png.
- በኤችቲኤምኤል ኢሜል ኮድዎ ውስጥ ምስሉን ለማሳየት የሚከተለውን ኮድ ይጠቀሙ።
<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)]>
ኤችቲኤምኤል ኢሜይሎችን ለማቅረብ ማይክሮሶፍት ወርድን የሚጠቀም የተወሰኑ የማይክሮሶፍት አውትሉክ ስሪቶችን ለማነጣጠር የሚያገለግል ሁኔታዊ አስተያየት ነው። የማይክሮሶፍት ዎርድ ኤችቲኤምኤል ማሰራጫ ሞተር ከሌሎች የኢሜል ደንበኞች እና የድር አሳሾች በጣም የተለየ ሊሆን ስለሚችል ብዙ ጊዜ ልዩ አያያዝን ይፈልጋል። የ
(gte mso 9)
የማይክሮሶፍት ኦፊስ እትም ከ 9 በላይ ወይም እኩል መሆኑን ያረጋግጣል፣ ይህም ከ Microsoft Office 2000 ጋር ይዛመዳል። |(IE)
ሁኔታው ደንበኛው ኢንተርኔት ኤክስፕሎረር መሆኑን ያረጋግጣል፣ እሱም ብዙ ጊዜ በማይክሮሶፍት አውትሉክ ጥቅም ላይ ይውላል። የኤችቲኤምኤል ኢሜል በሬቲና ማሳያ የተመቻቹ ምስሎች
ለሬቲና ማሳያዎች በተመቻቸ ጥራት ላይ ምስልን የሚያሳይ ምላሽ ሰጪ HTML ኢሜይል ኮድ ምሳሌ ይኸውና፡
<!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>
የሬቲና ማሳያ ምስል ምክሮች
የኤችቲኤምኤል ኢሜይሎችዎን ለሬቲና ማሳያዎች የተመቻቹ ምስሎችን ስለማሳደጉ አንዳንድ ተጨማሪ ምክሮች እዚህ አሉ።
- የምስል መለያዎችዎ ሁልጊዜ መጠቀምን እንደሚያካትቱ እርግጠኛ ይሁኑ
alt
ለምስሉ አውድ ለማቅረብ ጽሑፍ። - የምስል ጥራትን ሳይጎዳ የፋይል መጠንን ለመቀነስ ምስሎችን ለድር ያመቻቹ። ይህ መጠቀምን ሊያካትት ይችላል የምስል መጫን መሳሪያዎች, በምስሉ ላይ ጥቅም ላይ የሚውሉትን ቀለሞች ብዛት በመቀነስ እና ወደ ኢሜል ከመጫንዎ በፊት ምስሉን ወደ ትክክለኛው መጠን መለወጥ.
- የኢሜል ጭነት ጊዜዎችን ሊያዘገዩ ከሚችሉ ትልልቅ የበስተጀርባ ምስሎችን ያስወግዱ።
- አኒሜሽን ጂአይኤፎች በፋይል መጠን ከስታቲስቲክ ምስሎች የበለጠ ሊሆኑ ይችላሉ ምክንያቱም አኒሜሽኑን ለመፍጠር በሚያስፈልጋቸው በርካታ ክፈፎች ምክንያት ከ1 በታች ያቆዩዋቸው። Mb.