மின்னஞ்சல் மார்க்கெட்டிங் & ஆட்டோமேஷன்

உங்கள் HTML மின்னஞ்சலில் விழித்திரை காட்சிகளுக்கு உயர்-தெளிவு படங்களை எவ்வாறு பயன்படுத்துவது

ரெடினா டிஸ்ப்ளே என்பது ஒரு மார்க்கெட்டிங் சொல் Apple மனிதக் கண்ணால் ஒரு பொதுவான பார்வை தூரத்தில் தனிப்பட்ட பிக்சல்களை வேறுபடுத்திப் பார்க்க முடியாத அளவுக்கு அதிகமான பிக்சல் அடர்த்தி கொண்ட உயர் தெளிவுத்திறன் கொண்ட காட்சியை விவரிக்க. ஒரு விழித்திரை காட்சி பொதுவாக ஒரு அங்குலத்திற்கு 300 பிக்சல்கள் (பிக்சல் அடர்த்தி)பிபிஐ) அல்லது அதற்கு மேற்பட்டது, இது 72 ppi பிக்சல் அடர்த்தி கொண்ட நிலையான காட்சியை விட கணிசமாக அதிகமாகும்.

டிஸ்ப்ளேக்கள், மடிக்கணினிகள், மொபைல் சாதனங்கள் மற்றும் டேப்லெட்டுகளுக்கு ரெடினா டிஸ்ப்ளேக்கள் இப்போது மிகவும் பிரதானமாக உள்ளன. பல உற்பத்தியாளர்கள் இப்போது ஆப்பிள் ரெடினா டிஸ்ப்ளேக்களுடன் பொருந்தக்கூடிய அல்லது அதைவிட அதிகமான பிக்சல் அடர்த்தியுடன் கூடிய உயர் தெளிவுத்திறன் கொண்ட காட்சிகளை வழங்குகின்றனர்.

விழித்திரை காட்சிக்கு அதிக தெளிவுத்திறன் படத்தைக் காண்பிக்க CSS

ரெடினா காட்சிக்கான உயர் தெளிவுத்திறன் படத்தை ஏற்ற பின்வரும் CSS குறியீட்டைப் பயன்படுத்தலாம். இந்தக் குறியீடு சாதனத்தின் பிக்சல் அடர்த்தியைக் கண்டறிந்து படத்தை ஏற்றுகிறது 2 XNUMXx ரெடினா டிஸ்ப்ளேகளுக்கான பின்னொட்டு, மற்ற காட்சிகளுக்கு நிலையான-தெளிவு படத்தை ஏற்றும் போது.

@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');
}

மற்றொரு அணுகுமுறை வெக்டர் கிராபிக்ஸ் அல்லது பயன்படுத்த வேண்டும் எஸ்விஜிக்கான தரத்தை இழக்காமல் எந்தத் தீர்மானத்திற்கும் அளவிடக்கூடிய படங்கள். இங்கே ஒரு உதாரணம்:

<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 பண்புக்கூறு SVGக்கான எக்ஸ்எம்எல் பெயர்வெளியைக் குறிப்பிடுகிறது.

தி max-width மீது சொத்து அமைக்கப்பட்டுள்ளது div இந்த வழக்கில் அதிகபட்சமாக 300px அகலம் வரை, SVG பட அளவுகள் கிடைக்கக்கூடிய இடத்திற்குத் தானாகவே பொருந்துவதை உறுதிசெய்யும் உறுப்பு. அனைத்து சாதனங்களிலும் மின்னஞ்சல் கிளையண்டுகளிலும் SVG படங்கள் சரியாகக் காட்டப்படுவதை உறுதி செய்வதற்கான சிறந்த நடைமுறை இதுவாகும்.

குறிப்பு: மின்னஞ்சல் கிளையண்டைப் பொறுத்து SVG ஆதரவு மாறுபடும், எனவே SVG படம் சரியாகக் காட்டப்படுகிறதா என்பதை உறுதிப்படுத்த பல கிளையண்டுகளில் உங்கள் மின்னஞ்சலைச் சோதிப்பது முக்கியம்.

ரெடினா டிஸ்ப்ளேக்களுக்கான HTML மின்னஞ்சல்களை குறியிடுவதற்கான மற்றொரு வழி பயன்படுத்துவதாகும் 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 விழித்திரை காட்சிகளுக்கு உகந்ததாக உள்ளது

விழித்திரை காட்சிகளுக்கு உகந்த ஒரு தெளிவுத்திறனில் படத்தை சரியாகக் காண்பிக்கும், பதிலளிக்கக்கூடிய HTML மின்னஞ்சலைக் குறியிடுவது சாத்தியமாகும். எப்படி என்பது இங்கே:

  1. மின்னஞ்சலில் நீங்கள் காட்ட விரும்பும் உண்மையான படத்தை விட இரண்டு மடங்கு அதிக தெளிவுத்திறன் கொண்ட படத்தை உருவாக்கவும். எடுத்துக்காட்டாக, நீங்கள் 300×200 படத்தைக் காட்ட விரும்பினால், 600×400 படத்தை உருவாக்கவும்.
  2. உடன் உயர் தெளிவுத்திறன் படத்தைச் சேமிக்கவும் 2 XNUMXx பின்னொட்டு. உதாரணமாக, உங்கள் அசல் படம் என்றால் 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 Outlook இன் குறிப்பிட்ட பதிப்புகளைக் குறிவைக்கப் பயன்படுத்தப்படும் நிபந்தனைக் கருத்து. மைக்ரோசாஃப்ட் வேர்டின் HTML ரெண்டரிங் எஞ்சின் மற்ற மின்னஞ்சல் கிளையண்டுகள் மற்றும் இணைய உலாவிகளில் இருந்து முற்றிலும் வேறுபட்டதாக இருக்கும், எனவே இதற்கு பெரும்பாலும் சிறப்பு கையாளுதல் தேவைப்படுகிறது. தி

(gte mso 9) மைக்ரோசாஃப்ட் ஆபிஸ் பதிப்பு 9 ஐ விட அதிகமாக உள்ளதா அல்லது அதற்கு சமமானதா என்பதை நிபந்தனை சரிபார்க்கிறது, இது மைக்ரோசாஃப்ட் ஆபிஸ் 2000 உடன் ஒத்துப்போகிறது. |(IE) மைக்ரோசாப்ட் அவுட்லுக்கால் அடிக்கடி பயன்படுத்தப்படும் கிளையன்ட் இன்டர்நெட் எக்ஸ்ப்ளோரர் என்பதை நிபந்தனை சரிபார்க்கிறது.

ரெடினா டிஸ்ப்ளே உகந்த படங்களுடன் கூடிய 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>

விழித்திரை பட உதவிக்குறிப்புகள்

ரெடினா டிஸ்ப்ளேக்களுக்கு உகந்த படங்களுக்கான உங்கள் HTML மின்னஞ்சல்களை மேம்படுத்துவதற்கான சில கூடுதல் உதவிக்குறிப்புகள் இங்கே:

  • உங்கள் படக் குறிச்சொற்களை எப்போதும் பயன்படுத்துவதை உள்ளடக்கியிருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் alt படத்திற்கான சூழலை வழங்க உரை.
  • படத்தின் தரத்தை சமரசம் செய்யாமல் கோப்பு அளவைக் குறைக்க இணையத்திற்கான படங்களை மேம்படுத்தவும். இது பயன்படுத்துவதை உள்ளடக்கியது பட சுருக்க கருவிகள், படத்தில் பயன்படுத்தப்படும் வண்ணங்களின் எண்ணிக்கையைக் குறைத்தல் மற்றும் மின்னஞ்சலில் பதிவேற்றும் முன் படத்தை அதன் உகந்த பரிமாணங்களுக்கு மறுஅளவிடுதல்.
  • மின்னஞ்சல் ஏற்றும் நேரத்தை மெதுவாக்கும் பெரிய பின்னணி படங்களைத் தவிர்க்கவும்.
  • அனிமேஷனை உருவாக்குவதற்கு தேவையான பல பிரேம்கள் காரணமாக நிலையான படங்களை விட அனிமேஷன் செய்யப்பட்ட GIFகள் கோப்பு அளவில் பெரியதாக இருக்கலாம், அவற்றை 1 க்கு கீழ் நன்றாக வைத்திருக்க மறக்காதீர்கள் Mb.

Douglas Karr

Douglas Karr இன் CMO ஆகும் ஓபன் இன்சைட்ஸ் மற்றும் நிறுவனர் Martech Zone. டக்ளஸ் டஜன் கணக்கான வெற்றிகரமான மார்டெக் ஸ்டார்ட்அப்களுக்கு உதவியிருக்கிறார், மார்டெக் கையகப்படுத்துதல்கள் மற்றும் முதலீடுகளில் $5 பில்லுக்கும் மேலான விடாமுயற்சியில் உதவியிருக்கிறார், மேலும் நிறுவனங்களின் விற்பனை மற்றும் சந்தைப்படுத்தல் உத்திகளை செயல்படுத்தி தானியக்கமாக்குவதில் நிறுவனங்களுக்கு தொடர்ந்து உதவுகிறார். டக்ளஸ் சர்வதேச அளவில் அங்கீகரிக்கப்பட்ட டிஜிட்டல் மாற்றம் மற்றும் MarTech நிபுணர் மற்றும் பேச்சாளர். டக்ளஸ் டம்மியின் வழிகாட்டி மற்றும் வணிகத் தலைமைப் புத்தகத்தின் வெளியிடப்பட்ட ஆசிரியர் ஆவார்.

தொடர்புடைய கட்டுரைகள்

மேலே பட்டன் மேல்
நெருக்கமான

Adblock கண்டறியப்பட்டது

Martech Zone விளம்பர வருவாய், துணை இணைப்புகள் மற்றும் ஸ்பான்சர்ஷிப்கள் மூலம் எங்கள் தளத்தில் நாங்கள் பணமாக்குவதால், இந்த உள்ளடக்கத்தை உங்களுக்கு எந்த கட்டணமும் இல்லாமல் வழங்க முடியும். எங்கள் தளத்தைப் பார்க்கும்போது உங்கள் விளம்பரத் தடுப்பானை அகற்றினால் நாங்கள் பாராட்டுவோம்.