د بریښنالیک بازار موندنه او اتومات کول

ستاسو په HTML بریښنالیک کې د ریٹنا ښودلو لپاره د لوړ ریزولوشن عکسونو کارولو څرنګوالی

د ریٹنا ښودنه د بازار موندنې اصطلاح ده چې کارول کیږي مڼه د لوړ ریزولوشن ډیسپلی تشریح کولو لپاره چې د پکسل کثافت دومره لوړ وي چې د انسان سترګې نشي کولی د لید لید په ځانګړي فاصله کې د انفرادي پکسلونو توپیر وکړي. د ریٹنا ډسپلین معمولا په هر انچ کې د 300 پکسلز پکسل کثافت لري (ppi) یا لوړ، کوم چې د 72 ppi د پکسل کثافت سره د معیاري نندارې څخه د پام وړ لوړ دی.

د ریٹنا نندارې اوس د نندارې، لپټاپونو، ګرځنده وسیلو، او ټابلیټونو لپاره خورا مهم دي. ډیری جوړونکي اوس د پکسل کثافت سره د لوړ ریزولوشن ډیزاینونه وړاندیز کوي چې د ایپل د ریٹنا ډیسکونو سره سمون لري یا ډیر کوي.

CSS د ریٹنا نندارې لپاره د لوړ ریزولوشن عکس ښودلو لپاره

تاسو کولی شئ د ریٹنا نندارې لپاره د لوړ ریزولوشن عکس پورته کولو لپاره لاندې CSS کوډ وکاروئ. دا کوډ د وسیلې د پکسل کثافت کشف کوي او د عکس سره پورته کوي @ 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 خاصیت د SVG عکس ابعاد تعریفوي، پداسې حال کې چې xmlns خاصیت د SVG لپاره د XML نوم ځای مشخص کوي.

د max-width ملکیت په کې ټاکل شوی دی div عنصر د دې لپاره چې ډاډ ترلاسه کړي چې د SVG عکس په اوتومات ډول د موجود ځای سره مناسب کولو لپاره اندازه کوي ، په دې قضیه کې تر 300px اعظمي چوکۍ پورې. دا د ډاډ ترلاسه کولو لپاره غوره تمرین دی چې د 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. د لوړ ریزولوشن عکس سره خوندي کړئ @ 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 بریښنالیکونو وړاندې کولو لپاره مایکروسافټ ورډ کاروي. د مایکروسافټ ورډ د 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 متن د انځور لپاره شرایط چمتو کولو لپاره.
  • د ویب لپاره عکسونه غوره کړئ ترڅو د عکس کیفیت سره موافقت کولو پرته د فایل اندازه کمه کړئ. پدې کې کارول شامل دي د انځور فشار وسیلې، په عکس کې د کارول شوي رنګونو شمیر کمول، او بریښنالیک ته د اپلوډ کولو دمخه د عکس ترټولو غوره ابعادو ته بدلول.
  • د لوی شالید عکسونو څخه ډډه وکړئ کوم چې کولی شي د بریښنالیک بار بار ورو کړي.
  • متحرک GIFs د متحرک عکسونو په پرتله د فایل اندازې کې لوی کیدی شي د متحرک کولو لپاره ډیری چوکاټونو ته اړتیا له امله ، ډاډ ترلاسه کړئ چې دوی د 1 لاندې ښه وساتئ Mb.

Douglas Karr

Douglas Karr د CMO دی OpenINSIGHTS او بنسټ ایښودونکی Martech Zone. ډګلاس د لسګونو بریالي مارټیک پیلونو سره مرسته کړې ، د مارټیک استملاک او پانګوونې کې د 5 ملیارد ډالرو څخه ډیر په پام کې نیولو کې مرسته کړې ، او د دوی د پلور او بازار موندنې ستراتیژیو پلي کولو او اتومات کولو کې شرکتونو سره مرستې ته دوام ورکوي. ډګلاس په نړیواله کچه پیژندل شوی ډیجیټل بدلون او د مار ټیک ماهر او سپیکر دی. ډګلاس د ډمي لارښود او د سوداګرۍ مشرتابه کتاب یو خپور شوی لیکوال هم دی.

اړونده بیشتر

بېرته پورته تڼۍ ته
نژدې

اډ بلاک کشف شو

Martech Zone د دې وړتیا لري چې تاسو ته دا مینځپانګه په هیڅ لګښت چمتو کړي ځکه چې موږ د اعلاناتو عاید ، وابسته لینکونو ، او سپانسرشپونو له لارې زموږ سایټ منیټ کوو. موږ به ستاینه وکړو که تاسو زموږ د سایټ لیدو سره سم خپل د اعلاناتو بلاکر لرې کړئ.