ఇమెయిల్ మార్కెటింగ్ & ఆటోమేషన్

మీ HTML ఇమెయిల్‌లో రెటీనా డిస్‌ప్లేల కోసం హై-రిజల్యూషన్ ఇమేజ్‌లను ఎలా ఉపయోగించాలి

రెటీనా డిస్ప్లే అనేది మార్కెటింగ్ పదం ఆపిల్ మానవ కన్ను ఒక సాధారణ వీక్షణ దూరం వద్ద వ్యక్తిగత పిక్సెల్‌లను వేరు చేయలేకపోయేంత ఎక్కువ పిక్సెల్ సాంద్రత కలిగిన అధిక-రిజల్యూషన్ డిస్‌ప్లేను వివరించడానికి. రెటీనా డిస్‌ప్లే సాధారణంగా అంగుళానికి 300 పిక్సెల్‌ల పిక్సెల్ సాంద్రతను కలిగి ఉంటుంది (ppi) లేదా అంతకంటే ఎక్కువ, ఇది 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');
}

మరొక విధానం వెక్టర్ గ్రాఫిక్స్ లేదా ఉపయోగించడం 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 లక్షణం 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 ఇమెయిల్‌ను కోడ్ చేయడం సాధ్యపడుతుంది. ఇక్కడ ఎలా ఉంది:

  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 Wordని ఉపయోగించే Microsoft Outlook యొక్క నిర్దిష్ట సంస్కరణలను లక్ష్యంగా చేసుకోవడానికి ఉపయోగించే షరతులతో కూడిన వ్యాఖ్య. Microsoft Word యొక్క HTML రెండరింగ్ ఇంజిన్ ఇతర ఇమెయిల్ క్లయింట్లు మరియు వెబ్ బ్రౌజర్‌ల నుండి చాలా భిన్నంగా ఉంటుంది, కాబట్టి దీనికి తరచుగా ప్రత్యేక నిర్వహణ అవసరం. ది

(gte mso 9) మైక్రోసాఫ్ట్ ఆఫీస్ వెర్షన్ మైక్రోసాఫ్ట్ ఆఫీస్ 9కి అనుగుణంగా ఉండే 2000 కంటే ఎక్కువ లేదా దానికి సమానంగా ఉంటే కండిషన్ తనిఖీ చేస్తుంది. |(IE) క్లయింట్ ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ అయితే కండిషన్ తనిఖీ చేస్తుంది, దీనిని తరచుగా Microsoft Outlook ఉపయోగిస్తుంది.

రెటీనా డిస్ప్లే ఆప్టిమైజ్ చేసిన చిత్రాలతో 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 బిలియన్ల కంటే ఎక్కువ శ్రద్ధ వహించడంలో సహాయం చేసారు మరియు కంపెనీల అమ్మకాలు మరియు మార్కెటింగ్ వ్యూహాలను అమలు చేయడంలో మరియు ఆటోమేట్ చేయడంలో కంపెనీలకు సహాయం చేస్తూనే ఉన్నారు. డగ్లస్ అంతర్జాతీయంగా గుర్తింపు పొందిన డిజిటల్ ట్రాన్స్‌ఫర్మేషన్ మరియు మార్టెక్ నిపుణుడు మరియు స్పీకర్. డగ్లస్ డమ్మీస్ గైడ్ మరియు వ్యాపార నాయకత్వ పుస్తకం యొక్క ప్రచురించిన రచయిత కూడా.

సంబంధిత వ్యాసాలు

తిరిగి టాప్ బటన్ కు
క్లోజ్

Adblock కనుగొనబడింది

Martech Zone మేము ప్రకటన రాబడి, అనుబంధ లింక్‌లు మరియు స్పాన్సర్‌షిప్‌ల ద్వారా మా సైట్‌ను మానిటైజ్ చేయడం వల్ల ఎటువంటి ఖర్చు లేకుండా ఈ కంటెంట్‌ని మీకు అందించగలుగుతుంది. మీరు మా సైట్‌ని వీక్షిస్తున్నప్పుడు మీ ప్రకటన బ్లాకర్‌ని తీసివేస్తే మేము అభినందిస్తాము.