របៀបប្រើរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់សម្រាប់អេក្រង់ Retina នៅក្នុងអ៊ីម៉ែល HTML របស់អ្នក។
អេក្រង់ Retina គឺជាពាក្យទីផ្សារដែលប្រើដោយ ផ្លែប៉ោម ដើម្បីពិពណ៌នាអំពីអេក្រង់ដែលមានគុណភាពបង្ហាញខ្ពស់ដែលមានដង់ស៊ីតេភីកសែលខ្ពស់គ្រប់គ្រាន់ដែលភ្នែកមនុស្សមិនអាចបែងចែកភីកសែលនីមួយៗនៅចម្ងាយមើលធម្មតា។ អេក្រង់រីទីណាជាធម្មតាមានដង់ស៊ីតេភីកសែល 300 ភីកសែលក្នុងមួយអ៊ីញ (ppi) ឬខ្ពស់ជាងនេះ ដែលខ្ពស់ជាងការបង្ហាញស្តង់ដារដែលមានដង់ស៊ីតេភីកសែល 72 ppi ។
អេក្រង់ Retina ឥឡូវនេះគឺពិតជាសំខាន់សម្រាប់អេក្រង់ កុំព្យូទ័រយួរដៃ ឧបករណ៍ចល័ត និងថេប្លេត។ ក្រុមហ៊ុនផលិតជាច្រើនឥឡូវនេះផ្តល់ជូននូវអេក្រង់ដែលមានគុណភាពបង្ហាញខ្ពស់ជាមួយនឹងដង់ស៊ីតេភីកសែលដែលត្រូវគ្នាឬលើសពីអេក្រង់ Retina របស់ក្រុមហ៊ុន Apple ។
CSS ដើម្បីបង្ហាញរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់សម្រាប់អេក្រង់ Retina
អ្នកអាចប្រើកូដ CSS ខាងក្រោមដើម្បីផ្ទុករូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់សម្រាប់អេក្រង់ Retina ។ លេខកូដនេះរកឃើញដង់ស៊ីតេភីកសែលរបស់ឧបករណ៍ ហើយផ្ទុករូបភាពជាមួយ @ 2x បច្ច័យសម្រាប់អេក្រង់ Retina ខណៈពេលដែលកំពុងផ្ទុករូបភាពគុណភាពបង្ហាញស្តង់ដារសម្រាប់ការបង្ហាញផ្សេងទៀត។
@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 ត្រូវបានបង្កប់ដោយផ្ទាល់នៅក្នុងអ៊ីមែល HTML ដោយប្រើ <svg>
ស្លាក។ នេះ viewBox
គុណលក្ខណៈកំណត់វិមាត្រនៃរូបភាព SVG ខណៈពេលដែល xmlns
គុណលក្ខណៈបញ្ជាក់ទំហំឈ្មោះ XML សម្រាប់ SVG ។
នេះ max-width
ទ្រព្យសម្បត្តិត្រូវបានកំណត់នៅលើ div
ធាតុដើម្បីធានាថារូបភាព SVG ធ្វើមាត្រដ្ឋានដោយស្វ័យប្រវត្តិដើម្បីឱ្យសមនឹងទំហំដែលមានរហូតដល់ទទឹងអតិបរមា 300px ក្នុងករណីនេះ។ នេះជាការអនុវត្តល្អបំផុតសម្រាប់ធានាថារូបភាព SVG ត្រូវបានបង្ហាញយ៉ាងត្រឹមត្រូវនៅលើឧបករណ៍ទាំងអស់ និងកម្មវិធីអ៊ីមែល។
ចំណាំ: ការគាំទ្រ SVG អាចប្រែប្រួលអាស្រ័យលើកម្មវិធីអ៊ីមែលដូច្នេះ វាមានសារៈសំខាន់ណាស់ក្នុងការសាកល្បងអ៊ីមែលរបស់អ្នកនៅលើម៉ាស៊ីនភ្ញៀវជាច្រើន ដើម្បីធានាថារូបភាព SVG ត្រូវបានបង្ហាញយ៉ាងត្រឹមត្រូវ។
វិធីមួយទៀតនៃការសរសេរកូដអ៊ីមែល HTML សម្រាប់អេក្រង់ Retina គឺត្រូវប្រើប្រាស់ srcset
. ការប្រើប្រាស់គុណលក្ខណៈ srcset អនុញ្ញាតឱ្យអ្នកផ្តល់នូវរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់សម្រាប់អេក្រង់ Retina ខណៈពេលដែលធានាថារូបភាពមានទំហំត្រឹមត្រូវសម្រាប់ឧបករណ៍ដែលមានគុណភាពបង្ហាញទាប។
<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 សម្រាប់រូបភាពក្នុងអ៊ីមែល ធ្វើឱ្យប្រសើរសម្រាប់អេក្រង់រីទីណា
វាអាចទៅរួចក្នុងការសរសេរកូដអ៊ីមែល HTML ដែលឆ្លើយតបដែលនឹងបង្ហាញរូបភាពយ៉ាងត្រឹមត្រូវនៅកម្រិតភាពច្បាស់ដែលត្រូវបានធ្វើឱ្យប្រសើរសម្រាប់អេក្រង់រីទីណា។ នេះជារបៀប៖
- បង្កើតរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់ដែលមានទំហំទ្វេដងនៃរូបភាពពិតដែលអ្នកចង់បង្ហាញក្នុងអ៊ីមែល។ ឧទាហរណ៍ ប្រសិនបើអ្នកចង់បង្ហាញរូបភាព 300×200 បង្កើតរូបភាព 600×400។
- រក្សាទុករូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់ជាមួយ @ 2x បច្ច័យ។ ឧទាហរណ៍ប្រសិនបើរូបភាពដើមរបស់អ្នក។ image.pngរក្សាទុកកំណែគុណភាពបង្ហាញខ្ពស់ជា រូបភាព@2x.png.
- នៅក្នុងកូដអ៊ីមែល HTML របស់អ្នក សូមប្រើកូដខាងក្រោមដើម្បីបង្ហាញរូបភាព៖
<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)]>
គឺជាមតិយោបល់តាមលក្ខខណ្ឌដែលត្រូវបានប្រើដើម្បីកំណត់គោលដៅកំណែជាក់លាក់របស់ Microsoft Outlook ដែលប្រើ Microsoft Word ដើម្បីបង្ហាញអ៊ីមែល HTML ។ ម៉ាស៊ីនបង្ហាញ HTML របស់ Microsoft Word អាចមានភាពខុសគ្នាខ្លាំងពីកម្មវិធីអ៊ីមែល និងកម្មវិធីរុករកតាមអ៊ីនធឺណិតផ្សេងទៀត ដូច្នេះជារឿយៗវាទាមទារការគ្រប់គ្រងពិសេស។ នេះ។
(gte mso 9)
ពិនិត្យលក្ខខណ្ឌថាតើកំណែ Microsoft Office ធំជាង ឬស្មើ 9 ដែលត្រូវនឹង Microsoft Office 2000។ |(IE)
ពិនិត្យលក្ខខណ្ឌថាតើម៉ាស៊ីនភ្ញៀវគឺ Internet Explorer ដែលជារឿយៗត្រូវបានប្រើប្រាស់ដោយ Microsoft Outlook ។ អ៊ីម៉េល HTML ជាមួយ Retina Display Optimized រូបភាព
នេះគឺជាឧទាហរណ៍នៃកូដអ៊ីមែល 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>
ការណែនាំអំពីរូបភាពអេក្រង់រីទីណា
នេះគឺជាគន្លឹះបន្ថែមមួយចំនួនលើការបង្កើនប្រសិទ្ធភាពអ៊ីមែល HTML របស់អ្នកសម្រាប់រូបភាពដែលធ្វើឱ្យប្រសើរឡើងសម្រាប់អេក្រង់ Retina៖
- ត្រូវប្រាកដថាតែងតែមានស្លាករូបភាពរបស់អ្នករួមបញ្ចូលការប្រើប្រាស់
alt
អត្ថបទដើម្បីផ្តល់បរិបទសម្រាប់រូបភាព។ - ធ្វើឱ្យរូបភាពប្រសើរឡើងសម្រាប់គេហទំព័រដើម្បីកាត់បន្ថយទំហំឯកសារដោយមិនធ្វើឱ្យខូចគុណភាពរូបភាព។ នេះអាចរួមបញ្ចូលការប្រើប្រាស់ ការបង្ហាប់រូបភាព ឧបករណ៍ កាត់បន្ថយចំនួនពណ៌ដែលប្រើក្នុងរូបភាព និងប្តូរទំហំរូបភាពទៅជាទំហំដ៏ល្អប្រសើររបស់វា មុនពេលផ្ទុកវាទៅអ៊ីមែល។
- ជៀសវាងរូបភាពផ្ទៃខាងក្រោយធំដែលអាចពន្យឺតពេលផ្ទុកអ៊ីមែល។
- GIF ដែលមានចលនាអាចមានទំហំឯកសារធំជាងរូបភាពឋិតិវន្ត ដោយសារស៊ុមជាច្រើនដែលត្រូវការដើម្បីបង្កើតចលនា ត្រូវប្រាកដថារក្សាវាឱ្យបានល្អក្រោម 1 Mb.