ទីផ្សារអ៊ីមែល និងស្វ័យប្រវត្តិកម្ម

របៀបប្រើរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់សម្រាប់អេក្រង់ 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 ដែលឆ្លើយតបដែលនឹងបង្ហាញរូបភាពយ៉ាងត្រឹមត្រូវនៅកម្រិតភាពច្បាស់ដែលត្រូវបានធ្វើឱ្យប្រសើរសម្រាប់អេក្រង់រីទីណា។ នេះជារបៀប៖

  1. បង្កើតរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់ដែលមានទំហំទ្វេដងនៃរូបភាពពិតដែលអ្នកចង់បង្ហាញក្នុងអ៊ីមែល។ ឧទាហរណ៍ ប្រសិនបើអ្នកចង់បង្ហាញរូបភាព 300×200 បង្កើតរូបភាព 600×400។
  2. រក្សាទុករូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់ជាមួយ @ 2x បច្ច័យ។ ឧទាហរណ៍ប្រសិនបើរូបភាពដើមរបស់អ្នក។ image.pngរក្សាទុកកំណែគុណភាពបង្ហាញខ្ពស់ជា រូបភាព@2x.png.
  3. នៅក្នុងកូដអ៊ីមែល 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.

Douglas Karr

Douglas Karr គឺ CMO របស់ បើកការយល់ដឹង និងជាស្ថាបនិកនៃ Martech Zone. លោក Douglas បានជួយដល់ការចាប់ផ្តើមអាជីវកម្ម MarTech រាប់សិបនាក់ដែលទទួលបានជោគជ័យ បានជួយក្នុងកិច្ចខិតខំប្រឹងប្រែងដោយសារទឹកប្រាក់ជាង 5 ពាន់លានដុល្លារក្នុងការទិញ និងវិនិយោគ Martech ហើយបន្តជួយក្រុមហ៊ុនក្នុងការអនុវត្ត និងស្វ័យប្រវត្តិកម្មយុទ្ធសាស្ត្រលក់ និងទីផ្សាររបស់ពួកគេ។ Douglas គឺជាអ្នកបំប្លែងឌីជីថលដែលត្រូវបានទទួលស្គាល់ជាអន្តរជាតិ និងជាអ្នកជំនាញ MarTech និងវាគ្មិន។ Douglas ក៏ជាអ្នកនិពន្ធដែលបានបោះពុម្ពសៀវភៅណែនាំរបស់ Dummie និងសៀវភៅភាពជាអ្នកដឹកនាំអាជីវកម្មផងដែរ។

អត្ថបទ​ដែល​ទាក់ទង

ត្រលប់ទៅកំពូល
បិទ

Adblock បានរកឃើញ

Martech Zone អាចផ្តល់ឱ្យអ្នកនូវមាតិកានេះដោយមិនគិតថ្លៃទេ ពីព្រោះយើងរកប្រាក់ពីគេហទំព័ររបស់យើងតាមរយៈចំណូលពីការផ្សាយពាណិជ្ជកម្ម តំណសម្ព័ន្ធ និងជំនួយឧបត្ថម្ភ។ យើងនឹងរីករាយប្រសិនបើអ្នកនឹងលុបកម្មវិធីទប់ស្កាត់ការផ្សាយពាណិជ្ជកម្មរបស់អ្នកចេញនៅពេលអ្នកមើលគេហទំព័ររបស់យើង។