رسپانسیو تصاویر: srcset، sizes اور ڈیوائس پکسل تناسب

فائل پکسل، CSS پکسل اور DPR الگ رکھیں

800 پکسل چوڑی فائل کا صفحے پر 800 CSS پکسل جگہ لینا لازم نہیں۔ وہ 400 CSS پکسل میں دکھ سکتی ہے۔ DPR 2 ہو تو اس جگہ کی چوڑائی تقریباً 800 ڈیوائس پکسل ہوگی۔ یہ منصوبہ بندی کا تعلق ہے، فائل کا آخری انتخاب براؤزر کرتا ہے۔

پہلے دکھانے کی جگہ نکالیں: 800 اور ویوپورٹ کی چوڑائی منفی 32 میں چھوٹی قدر لیں۔ اسے DPR سے ضرب دے کر موزوں فائل چوڑائی کا اندازہ بنائیں۔ تصویر صرف باریک کالم میں ہو تو پورے ویوپورٹ کو ضرب نہ دیں۔

بدلتی چوڑائی کے لیے w بیان استعمال کریں

w فائل کی اصل پکسل چوڑائی بتاتا ہے، لے آؤٹ بدلنے کی حد نہیں۔ اسے حقیقی فائل سے ملنا چاہیے۔ sizes موجودہ لے آؤٹ کی متوقع چوڑائی ہے۔ نیچے 832 CSS پکسل یا زیادہ کے ویوپورٹ پر جگہ 800 ہے؛ چھوٹے پر دونوں حاشیے نکالے جاتے ہیں۔

ساتھ دیا CSS مثال کا حصہ ہے۔ جزو بعد میں آدھے گرڈ میں جائے تو sizes بھی بدلیں۔ پرانی مکمل چوڑائی رکھنے سے براؤزر غیر ضروری بڑی فائل چن سکتا ہے۔ درست بیان اصل لے آؤٹ کا ہوتا ہے، مشہور موبائل چوڑائیوں کی فہرست کا نہیں۔

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

پہلے اندازہ لگائیں، پھر اصل انتخاب دیکھیں

392 چوڑے ویوپورٹ اور DPR 2 میں جگہ 360 اور ہدف 720 پکسل ہے۔ موجودہ فہرست میں 800w معقول متوقع انتخاب ہے۔ بڑی اسکرین کے DPR 2 پر ہدف 1600 ہے۔ یہ حساب انتخاب کا ان پٹ سمجھاتا ہے، کسی مخصوص فائل کا لازمی حکم نہیں۔

براؤزر دوسری باتیں بھی دیکھ سکتا ہے اور ونڈو چھوٹی ہونے پر پہلے سے آئی بڑی تصویر رکھ سکتا ہے۔ صاف جانچ میں ڈیوائس پہلے منتخب کریں، پھر نیا صفحہ یا دوبارہ لوڈ کر کے URL اور منتقل بائٹس دیکھیں۔ ایک ہی گرم صفحہ بار بار چھوٹا کرنا گمراہ کر سکتا ہے۔

فہرست کے مطابق اصل 400، 800 اور 1600 پکسل فائلیں بنائیں۔ معیار اور ہر URL کا تصویری جواب جانچیں۔ ایک 1600 پکسل فائل کی نقلیں بنا کر مختلف w لکھنے سے نہ اصل ڈاؤن لوڈ کم ہوگا نہ ڈی کوڈ کا بوجھ۔

• عنصر کی اصل دکھائی چوڑائی دیکھیں، اسے ویوپورٹ کے برابر فرض نہ کریں۔
• currentSrc کا URL نیٹ ورک پینل سے ملائیں۔
• ابعاد، جواب کی قسم، کیش اور منتقل بائٹس جانچیں۔
• چھوٹی اور بڑی اسکرین پر DPR 1 اور DPR 2 آزمائیں۔
• لوڈ سے پہلے اور بعد افقی بہاؤ اور لے آؤٹ کی حرکت دیکھیں۔

مقررہ سائز کے لیے x بیان موزوں ہے

ہمیشہ ایک ہی چوڑائی والے لوگو کے لیے کثافت کا بیان استعمال ہو سکتا ہے۔ 120 CSS پکسل جگہ کے لیے 120 پکسل فائل کو 1x اور 240 پکسل کو 2x دیں۔ یہ ایک ہی جگہ کی مختلف ریزولوشن ہیں۔ ایک srcset میں x اور w نہ ملائیں۔

مختلف تراش الگ مسئلہ ہے۔ موبائل پر چہرہ قریب اور ڈیسک ٹاپ پر پورا منظر چاہیے تو picture اور متعلقہ میڈیا شرطیں استعمال کریں۔ مرکزی مثال منظر نہیں بدلتی، صرف ریزولوشن بدلتی ہے۔ متبادل متن تصویر کے بامعنی مواد کی وضاحت کرے۔

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

تناسب اور لوڈ ہونے کا وقت بھی منصوبے میں رکھیں

width اور height سے تصویر آنے سے پہلے تناسب کے مطابق جگہ رکھی جا سکتی ہے۔ CSS سے چوڑائی بدلے تو یہ اصل CSS سائز مسلط نہیں کرتے۔ 4:3 مثال میں چوڑائی 800 پر اونچائی 600، اور چوڑائی 360 پر 270 ہے۔

لمبے صفحے کی نیچے والی تصاویر مؤخر لوڈ ہو سکتی ہیں، مگر فوراً نظر آنے والی اہم تصویر کی درخواست بلاوجہ نہ روکیں۔ جزو کی جگہ کے مطابق فیصلہ کریں۔ درست ریزولوشن، کمپریشن، فارمیٹ اور لوڈنگ الگ لاگتیں سنبھالتے ہیں۔

خام تصویری میموری اور نیٹ ورک فائل سائز مختلف ہیں۔ چھوٹی WebP کھل کر بڑا پکسل بفر بن سکتی ہے۔ میموری کیلکولیٹر میں ڈی کوڈ کے بعد ابعاد دیں، جبکہ کمپریس فائل کے بائٹس ناپیں؛ صرف پکسل سے اندازہ کافی نہیں۔

اشاعت سے پہلے جزو اور فائلوں کا معاہدہ جانچیں

لے آؤٹ اور تصویر بنانے کے اصول ساتھ محفوظ کریں: چوڑائیاں، تراش، تناسب، معیار اور sizes کا اظہار۔ زیادہ سے زیادہ چوڑائی 800 سے 1000 ہو تو فائلیں بھی دوبارہ دیکھیں۔

بنیادی src، تمام srcset پتے، مفید متبادل متن اور محفوظ جگہ جانچیں۔ CSS سے ڈیوائس پکسل کیلکولیٹر میں اپنی چوڑائی اور DPR دیں، تناسب والے سے اونچائی نکالیں۔ مقررہ حاشیوں کی جگہ محض 100% لکھنا اصل جگہ کی درست وضاحت نہیں۔