විද්‍යුත් තැපැල් අලෙවිකරණය සහ ස්වයංක්‍රීයකරණය

ඔබගේ HTML විද්‍යුත් තැපෑලෙහි රෙටිනා සංදර්ශක සඳහා අධි-විභේදන රූප භාවිතා කරන්නේ කෙසේද

Retina display යනු භාවිතා කරන අලෙවිකරණ යෙදුමකි Apple ජංගම දුරකථන සාමාන්‍ය නැරඹුම් දුරකදී මිනිස් ඇසට තනි පික්සල වෙන්කර හඳුනාගත නොහැකි තරම් ඉහළ පික්සල් ඝනත්වයක් ඇති අධි-විභේදන සංදර්ශකයක් විස්තර කිරීමට. දෘෂ්ටි විතානයේ සංදර්ශකය සාමාන්‍යයෙන් අඟලකට පික්සල 300ක පික්සල් ඝනත්වයක් ඇත (ppi) හෝ ඊට වැඩි, එය පික්සල් ඝනත්වය 72 ppi සහිත සම්මත සංදර්ශකයකට වඩා සැලකිය යුතු ලෙස ඉහළ ය.

Retina සංදර්ශක දැන් සංදර්ශක, ලැප්ටොප්, ජංගම උපාංග සහ ටැබ්ලට් සඳහා ප්‍රධාන ධාරාව වේ. බොහෝ නිෂ්පාදකයින් දැන් Apple හි Retina සංදර්ශකවලට ගැලපෙන හෝ ඉක්මවන පික්සල් ඝනත්වය සහිත අධි-විභේදන සංදර්ශක ලබා දෙයි.

Retina Display එකක් සඳහා ඉහළ විභේදන රූපයක් පෙන්වීමට CSS

Retina සංදර්ශකය සඳහා අධි-විභේදන රූපයක් පූරණය කිරීමට ඔබට පහත CSS කේතය භාවිතා කළ හැක. මෙම කේතය උපාංගයේ පික්සල් ඝනත්වය හඳුනාගෙන රූපය සමඟින් පූරණය කරයි X 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 කේතය කෙලින්ම HTML විද්‍යුත් තැපෑලෙහි අන්තර්ගත කර ඇත <svg> ටැගය. එම viewBox attribute මඟින් SVG රූපයේ මානයන් නිර්වචනය කරයි xmlns attribute SVG සඳහා XML නාම අවකාශය නියම කරයි.

එම max-width දේපල මත පිහිටුවා ඇත div මෙම අවස්ථාවෙහි උපරිම පළල 300px දක්වා, පවතින ඉඩට සරිලන පරිදි SVG රූපය ස්වයංක්‍රීයව පරිමාණය වන බව සහතික කිරීමට මූලද්‍රව්‍යය. සියලුම උපාංග සහ විද්‍යුත් තැපැල් සේවාලාභීන් මත SVG රූප නිසි ලෙස සංදර්ශණය වන බව සහතික කිරීම සඳහා මෙය හොඳම භාවිතයකි.

සටහන: ඊමේල් සේවාලාභියා අනුව SVG සහාය වෙනස් විය හැක, එබැවින් SVG රූපය නිසි ලෙස සංදර්ශණය වන බව සහතික කර ගැනීම සඳහා බහු සේවාදායකයින් මත ඔබගේ විද්‍යුත් තැපෑල පරීක්ෂා කිරීම වැදගත් වේ.

රෙටිනා සංදර්ශක සඳහා HTML ඊමේල් කේතනය කිරීමේ තවත් ක්‍රමයක් නම් භාවිතා කිරීමයි 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 attribute රූප මූලාශ්‍ර දෙකක් සපයයි: image.jpg පික්සල 600 හෝ ඊට අඩු විභේදනයක් සහිත උපාංග සඳහා, සහ image@2x.jpg පික්සල 1200 හෝ ඊට වැඩි විභේදනයක් සහිත උපාංග සඳහා. එම 600w සහ 1200w descriptors මඟින් පික්සලවල ඇති පින්තූරවල ප්‍රමාණය සඳහන් කරයි, එය උපාංගයේ විභේදනය මත පදනම්ව බාගත කළ යුතු රූපය තීරණය කිරීමට බ්‍රවුසරයට උපකාර කරයි.

සියලුම විද්‍යුත් තැපැල් සේවාලාභීන් සහාය නොදක්වයි srcset ගුණාංගය. සඳහා ආධාරක මට්ටම srcset විද්‍යුත් තැපැල් සේවාලාභියා මත පදනම්ව පුළුල් ලෙස වෙනස් විය හැක, එබැවින් පින්තූර නිසි ලෙස ප්‍රදර්ශනය වන බව සහතික කිරීම සඳහා බහු සේවාදායකයින් මත ඔබගේ විද්‍යුත් තැපැල් පරීක්ෂා කිරීම වැදගත් වේ.

ඊමේල් වල පින්තූර සඳහා HTML Retina Displays සඳහා ප්‍රශස්ත කර ඇත

දෘෂ්ටි විතානයේ සංදර්ශක සඳහා ප්‍රශස්ත විභේදනයකින් රූපයක් නිසි ලෙස සංදර්ශන කරන ප්‍රතිචාරාත්මක HTML විද්‍යුත් තැපෑලක් කේතනය කළ හැකිය. මෙන්න මෙහෙමයි.

  1. ඔබට විද්‍යුත් තැපෑලෙහි පෙන්වීමට අවශ්‍ය සැබෑ රූපයේ ප්‍රමාණය මෙන් දෙගුණයක් වන අධි-විභේදන රූපයක් සාදන්න. උදාහරණයක් ලෙස, ඔබට 300×200 රූපයක් පෙන්වීමට අවශ්‍ය නම්, 600×400 රූපයක් සාදන්න.
  2. සමඟ අධි-විභේදන රූපය සුරකින්න X 2x උපසර්ගය. උදාහරණයක් ලෙස, ඔබේ මුල් රූපය නම් image.png, අධි-විභේදන අනුවාදය ලෙස සුරකින්න image@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)]> HTML ඊමේල් විදැහුම් කිරීමට Microsoft Word භාවිතා කරන Microsoft Outlook හි නිශ්චිත අනුවාද ඉලක්ක කිරීමට භාවිතා කරන කොන්දේසි සහිත විවරණයකි. මයික්‍රොසොෆ්ට් වර්ඩ් හි HTML විදැහුම්කරණ එන්ජිම අනෙකුත් විද්‍යුත් තැපැල් සේවාදායකයින්ට සහ වෙබ් බ්‍රව්සර්වලට වඩා බෙහෙවින් වෙනස් විය හැක, එබැවින් එයට බොහෝ විට විශේෂ හැසිරවීමක් අවශ්‍ය වේ. එම

(gte mso 9) Microsoft Office අනුවාදය Microsoft Office 9 ට අනුරූප වන 2000 ට වඩා වැඩි හෝ සමාන නම් කොන්දේසි පරීක්ෂා කරයි. |(IE) සේවාලාභියා Microsoft Outlook විසින් බොහෝ විට භාවිතා කරන Internet Explorer නම් තත්ත්වය පරීක්ෂා කරයි.

Retina Display Optimized Images සහිත HTML විද්‍යුත් තැපෑල

දෘෂ්ටි විතානයේ සංදර්ශක සඳහා ප්‍රශස්ත කළ විභේදනයක රූපයක් පෙන්වන ප්‍රතිචාරාත්මක 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>

Retina Display Image Tips

Retina සංදර්ශක සඳහා ප්‍රශස්ත කළ පින්තූර සඳහා ඔබේ HTML විද්‍යුත් තැපෑල ප්‍රශස්ත කිරීම පිළිබඳ අමතර උපදෙස් කිහිපයක් මෙන්න:

  • ඔබේ රූප ටැග් භාවිතා කිරීම ඇතුළත් කිරීමට සැමවිටම වග බලා ගන්න alt රූපය සඳහා සන්දර්භය සැපයීමට පෙළ.
  • රූපයේ ගුණාත්මක භාවයට හානියක් නොවන පරිදි ගොනු ප්‍රමාණය අඩු කිරීමට වෙබය සඳහා පින්තූර ප්‍රශස්ත කරන්න. මෙය භාවිතා කිරීම ඇතුළත් විය හැකිය රූප සම්පීඩනය මෙවලම්, රූපයේ භාවිතා කරන වර්ණ ගණන අඩු කිරීම සහ ඊමේල් වෙත උඩුගත කිරීමට පෙර රූපය එහි ප්‍රශස්ත මානයන් වෙත ප්‍රමාණය වෙනස් කිරීම.
  • ඊමේල් පැටවීමේ වේලාවන් මන්දගාමී කළ හැකි විශාල පසුබිම් රූපවලින් වළකින්න.
  • සජීවිකරණය නිර්මාණය කිරීමට අවශ්‍ය බහු රාමු නිසා ස්ථිතික රූපවලට වඩා සජීවිකරණ GIF ගොනු ප්‍රමාණයෙන් විශාල විය හැක, ඒවා 1 යටතේ හොඳින් තබා ගැනීමට වග බලා ගන්න. Mb.

Douglas Karr

Douglas Karr හි CMO වේ විවෘත INSIGHTS සහ නිර්මාතෘ Martech Zone. ඩග්ලස් සාර්ථක MarTech ආරම්භක දුසිම් ගණනකට උදව් කර ඇත, මාර්ටෙක් අත්පත් කර ගැනීම් සහ ආයෝජන සඳහා ඩොලර් 5 කට වඩා වැඩි කඩිසරකමකට සහාය වී ඇත, සහ ඔවුන්ගේ විකුණුම් සහ අලෙවිකරණ උපාය මාර්ග ක්‍රියාත්මක කිරීමට සහ ස්වයංක්‍රීය කිරීමට සමාගම්වලට දිගටම සහාය වේ. ඩග්ලස් යනු ජාත්‍යන්තරව පිළිගත් ඩිජිටල් පරිවර්තනයක් වන අතර MarTech විශේෂඥයෙකු සහ කථිකයෙකි. ඩග්ලස් ඩමිගේ මාර්ගෝපදේශකයෙකු සහ ව්‍යාපාර නායකත්ව පොතක ප්‍රකාශිත කතුවරයෙකි.

සබැඳි පුවත්

ඉහළට බොත්තම
සමීප

Adblock අනාවරණය විය

Martech Zone වෙළඳ දැන්වීම් ආදායම, අනුබද්ධ සබැඳි සහ අනුග්‍රාහකත්ව හරහා අපි අපගේ වෙබ් අඩවියෙන් මුදල් උපයන නිසා කිසිදු වියදමකින් තොරව ඔබට මෙම අන්තර්ගතය ලබා දීමට හැකි වේ. ඔබ අපගේ වෙබ් අඩවිය නරඹන විට ඔබේ දැන්වීම් අවහිර කරන්නා ඉවත් කරන්නේ නම් අපි අගය කරන්නෙමු.