നിങ്ങളുടെ HTML ഇമെയിലിൽ റെറ്റിന ഡിസ്പ്ലേകൾക്കായി ഹൈ-റെസല്യൂഷൻ ഇമേജുകൾ എങ്ങനെ ഉപയോഗിക്കാം
റെറ്റിന ഡിസ്പ്ലേ എന്നത് ഒരു മാർക്കറ്റിംഗ് പദമാണ് ആപ്പിൾ ഒരു സാധാരണ കാഴ്ച ദൂരത്തിൽ വ്യക്തിഗത പിക്സലുകളെ വേർതിരിച്ചറിയാൻ മനുഷ്യന്റെ കണ്ണിന് കഴിയാത്തത്ര ഉയർന്ന പിക്സൽ സാന്ദ്രതയുള്ള ഉയർന്ന റെസല്യൂഷൻ ഡിസ്പ്ലേയെ വിവരിക്കാൻ. ഒരു റെറ്റിന ഡിസ്പ്ലേയ്ക്ക് സാധാരണയായി ഒരു ഇഞ്ചിന് 300 പിക്സൽ പിക്സൽ സാന്ദ്രതയുണ്ട് (ppi) അല്ലെങ്കിൽ ഉയർന്നത്, ഇത് 72 ppi പിക്സൽ സാന്ദ്രതയുള്ള ഒരു സാധാരണ ഡിസ്പ്ലേയേക്കാൾ വളരെ കൂടുതലാണ്.
ഡിസ്പ്ലേകൾ, ലാപ്ടോപ്പുകൾ, മൊബൈൽ ഉപകരണങ്ങൾ, ടാബ്ലെറ്റുകൾ എന്നിവയ്ക്കായി റെറ്റിന ഡിസ്പ്ലേകൾ ഇപ്പോൾ മുഖ്യധാരയാണ്. പല നിർമ്മാതാക്കളും ഇപ്പോൾ ആപ്പിളിന്റെ റെറ്റിന ഡിസ്പ്ലേകളുമായി പൊരുത്തപ്പെടുന്നതോ അതിലധികമോ പിക്സൽ സാന്ദ്രതയുള്ള ഉയർന്ന റെസല്യൂഷൻ ഡിസ്പ്ലേകൾ വാഗ്ദാനം ചെയ്യുന്നു.
റെറ്റിന ഡിസ്പ്ലേയ്ക്കായി ഉയർന്ന മിഴിവുള്ള ചിത്രം പ്രദർശിപ്പിക്കാൻ CSS
ഒരു റെറ്റിന ഡിസ്പ്ലേയ്ക്കായി ഉയർന്ന റെസല്യൂഷൻ ഇമേജ് ലോഡ് ചെയ്യാൻ നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന 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');
}
മറ്റൊരു സമീപനം വെക്റ്റർ ഗ്രാഫിക്സ് അല്ലെങ്കിൽ ഉപയോഗിക്കുക എന്നതാണ് എസ്വിജി ഗുണനിലവാരം നഷ്ടപ്പെടാതെ ഏത് റെസല്യൂഷനിലേക്കും സ്കെയിൽ ചെയ്യാൻ കഴിയുന്ന ചിത്രങ്ങൾ. ഒരു ഉദാഹരണം ഇതാ:
<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-യുടെ XML നെയിംസ്പേസ് വ്യക്തമാക്കുന്നു.
ദി 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 ഇമെയിൽ കോഡ് ചെയ്യാൻ സാധിക്കും. എങ്ങനെയെന്നത് ഇതാ:
- നിങ്ങൾ ഇമെയിലിൽ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന യഥാർത്ഥ ചിത്രത്തിന്റെ ഇരട്ടി വലിപ്പമുള്ള ഉയർന്ന റെസല്യൂഷൻ ഇമേജ് സൃഷ്ടിക്കുക. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് 300×200 ഇമേജ് പ്രദർശിപ്പിക്കണമെങ്കിൽ, 600×400 ഇമേജ് സൃഷ്ടിക്കുക.
- ഉപയോഗിച്ച് ഉയർന്ന റെസല്യൂഷൻ ചിത്രം സംരക്ഷിക്കുക X 2x പ്രത്യയം. ഉദാഹരണത്തിന്, നിങ്ങളുടെ യഥാർത്ഥ ചിത്രം ആണെങ്കിൽ image.png, ഉയർന്ന മിഴിവുള്ള പതിപ്പ് ഇതായി സംരക്ഷിക്കുക image@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)]>
HTML ഇമെയിലുകൾ റെൻഡർ ചെയ്യാൻ Microsoft Word ഉപയോഗിക്കുന്ന Microsoft Outlook-ന്റെ നിർദ്ദിഷ്ട പതിപ്പുകൾ ടാർഗെറ്റുചെയ്യാൻ ഉപയോഗിക്കുന്ന ഒരു സോപാധിക അഭിപ്രായമാണ്. Microsoft Word-ന്റെ 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.