کسی ویب سائٹ کو تعینات کرتے وقت، ڈویلپر عام طور پر اسکرین کے تمام سائز کے لیے ایک ہی تصویر کا استعمال کرتے ہیں، جو کہ ایک اچھا عمل نہیں ہے کیونکہ سائز تبدیل کرنے کے لیے براؤزر پر انحصار نہیں کیا جا سکتا۔ ایسی صورت حال میں، ریسپانسیو امیجز اس بات کو یقینی بناتی ہیں کہ تصویر کو متعلقہ ڈیوائس کے لیے مناسب سائز اور معیار پر ڈاؤن لوڈ کیا جائے، اس طرح پیج لوڈنگ کی رفتار میں اضافہ ہوتا ہے۔
رسپانسیو امیجز کا استعمال کرتے ہوئے پیج لوڈ سپیڈ کو کیسے بڑھایا جائے؟
جوابی تصاویر کے ذریعے صفحہ لوڈ کرنے کی رفتار کو بڑھانے کے لیے، درج ذیل طریقوں پر غور کریں:
مثال 1: 'srcset' انتساب کا استعمال کرتے ہوئے ریسپانسیو امیجز کے ذریعے صفحہ لوڈ کرنے کی رفتار کو بہتر بنائیں
ریسپانسیو امیجز کو لاگو کرنے کا سب سے آسان طریقہ یہ ہو سکتا ہے کہ ' srcset 'صفت' میں جمع 'ٹیگ۔ یہ وصف پروگرامر کو تصویر کے مختلف سائز بتانے کے قابل بناتا ہے، اور براؤزر خود بخود صارف کی سکرین کے سائز کے حوالے سے موزوں ترین تصویر کا انتخاب کرتا ہے۔ مندرجہ ذیل مظاہرہ ہے:
DOCTYPE html >
< html >
< سر >
< میٹا چار سیٹ = 'utf-8' >
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' >
< عنوان >> عنوان >
سر >
< جسم >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' سب کچھ = 'ذمہ دار تصویر'
srcset = 'F:\JOB تکنیکی مضامین\imgre.png 400w, F:\JOB تکنیکی مضامین\imgre.png 800w, F:\JOB تکنیکی مضامین\imgre.png 1200w'
/>
جسم >
html >
اس کوڈ میں:
- ' srcset ” وصف شامل ہے جس میں ہر بار تصویر کا راستہ اور مختلف چوڑائی شامل ہوتی ہے۔
- یہ اس طرح ہے کہ تصویر ' F:\JOB TECHNICAL ARTICLES\imgre.png 400w 'ایک تصویری راستے کی نمائندگی کرتا ہے جس کی چوڑائی ہے' 400 ' پکسلز
- اس معلومات کی بنیاد پر، براؤزر صارف کی اسکرین کے سائز کی بنیاد پر ڈاؤن لوڈ کرنے کے لیے موزوں ترین تصویر کا تجزیہ کرتا ہے جیسے کہ چھوٹی اسکرینیں چھوٹی تصاویر دکھاتی ہیں، اس طرح بینڈوتھ کو محفوظ رکھتا ہے۔
آؤٹ پٹ
مثال 2: مختلف پکسل کثافت بتا کر ریسپانسیو امیجز کے ذریعے صفحہ لوڈ کرنے کی رفتار کو بہتر بنائیں
اس مثال میں، تصویر کا راستہ ہائی ریزولیوشن ڈسپلے کے لیے مختلف پکسل کثافت کے ساتھ متعین کیا جائے گا۔ یہ 'کے ذریعے حاصل کیا جا سکتا ہے srcset ' وصف، ذیل میں دکھایا گیا ہے:
DOCTYPE html >< html >
< سر >
< میٹا چار سیٹ = 'utf-8' >
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' >
< عنوان >> عنوان >
سر >
< جسم >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' سب کچھ = 'ذمہ دار تصویر' srcset = 'F:\JOB تکنیکی مضامین\imgre.png 1x، F:\JOB تکنیکی مضامین\imgre.png 1.5x، F:\JOB تکنیکی مضامین\imgre.png 2x'
/>
جسم >
html >
کوڈ کے اس ٹکڑوں میں، مختلف پکسل کثافت کے ساتھ تین بار تصویری راستے کی وضاحت کریں۔ یہ اس طرح ہے کہ براؤزر مختلف اسکرینوں پر اعلیٰ معیار کو یقینی بنانے کے لیے موزوں ترین/مناسب تصویر کا انتخاب کرتا ہے۔
نوٹ: ' 1x 'پکسل ڈیفالٹ ویلیو ہے لہذا یہ صارف کے لیے تصویر کے راستے سے منسلک ہونے یا نہ کرنے کا انتخاب ہے۔
آؤٹ پٹ
مثال 3: 'سائز' انتساب کا استعمال کرتے ہوئے ریسپانسیو امیجز کے ذریعے صفحہ لوڈ کرنے کی رفتار کو بہتر بنائیں
کچھ حالات میں، ایک حد ہوسکتی ہے جہاں اسکرین پر تصویر کا اصل سائز اسکرین کی چوڑائی سے مختلف ہوتا ہے۔ اس مسئلے کو حل کرنے کے لیے، ' سائز میڈیا کے سوالات یا ایک مقررہ سائز کے حوالے سے تصویر کے سائز کو شامل کرنے کے لیے خصوصیت کا استعمال کیا جا سکتا ہے۔ ذیل میں کوڈ کا مظاہرہ ہے:
DOCTYPE html >< html >
< سر >
< میٹا چار سیٹ = 'utf-8' >
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' >
< عنوان >> عنوان >
سر >
< جسم >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' سب کچھ = 'ذمہ دار تصویر' srcset = 'F:\JOB تکنیکی مضامین\imgre.png 50w, F:\JOB تکنیکی مضامین\imgre.png 800w, F:\JOB تکنیکی مضامین\imgre.png 1200w'
سائز = '(زیادہ سے زیادہ چوڑائی: 800px) 100vw، 800px'
/>
جسم >
html >
اس کوڈ بلاک میں، ' سائز ” وصف میڈیا کے سوالات اور سائز کو مربوط کرتا ہے۔ یہ اس طرح ہے کہ یہ براؤزر کو صارف کی سکرین کی چوڑائی کے حوالے سے تصویر کے سائز کا انتخاب کرنے میں رہنمائی کرتا ہے۔ یہ یقینی بناتا ہے کہ تصویر (تصاویر) ہدف کی زیادہ سے زیادہ چوڑائی سے زیادہ نہ ہو۔
آؤٹ پٹ
'سائز' وصف کا استعمال کرتے ہوئے اہم تحفظات
استعمال کرنے میں کچھ حدود ہیں ' سائز ' وصف بھی ذیل میں درج ہے:
- میں متعدد میڈیا سوالات کا استعمال کرتے وقت ' سائز ” انتساب، یقینی بنائیں کہ پہلی حقیقی میڈیا استفسار کا انتخاب کیا گیا ہے۔ اس کے علاوہ، اس بات کو یقینی بنائیں کہ میڈیا کے سوالات سب سے زیادہ مخصوص سے کم از کم مخصوص تک آرڈر کیے گئے ہیں۔
- 'سائز' وصف فی صد سائز کو سپورٹ نہیں کرتا ہے کیونکہ براؤزر اس بات سے بے خبر ہے کہ فی صد میں مخصوص کی گئی کوئی چیز اس وقت تک کتنی چوڑی ہوگی جب تک کہ اسے بنیادی عنصر کی چوڑائی کا علم نہ ہو۔
مثال 4: '
' <تصویر> ' عنصر پروگرامر کو اسکرین کے مختلف سائز پر متعدد تصاویر کو ڈسپلے اور تعینات کرنے کے قابل بناتا ہے۔ یہ ان صورتوں میں مددگار ہے جہاں آلہ کی بنیاد پر مواد مختلف ہوتا ہے۔ ذیل میں کوڈ کا مظاہرہ ہے:
DOCTYPE html >< html >
< سر >
< میٹا چار سیٹ = 'utf-8' >
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' >
< عنوان >> عنوان >
سر >
< جسم >
< تصویر >
< ذریعہ میڈیا = '(زیادہ سے زیادہ چوڑائی: 100px)' srcset = 'F:\JOB TECHNICAL ARTICLES\imgbanner.png' />
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' سب کچھ = 'ذمہ دار تصویر' />
تصویر >
جسم >
html >
ان کوڈ لائنوں کے مطابق:
- وضاحت کریں ' <تصویر> 'عنصر جو جمع کرتا ہے' <ذریعہ> مختلف تصاویر کے عناصر اور براؤزر کو صارف کی سکرین کے سائز کی بنیاد پر مناسب تصویر کا انتخاب کرنے دیں۔
- اس کے علاوہ، اگر ' <ذریعہ> ' عناصر اسکرین کے سائز کے لیے موزوں ہیں، تصویر میں بیان کردہ
ٹیگ فال بیک کے طور پر کام کرتا ہے۔
- اس کے نتیجے میں غیر متوقع صورت میں ایک متبادل تصویر کا اضافہ ہوتا ہے، اس طرح صفحہ لوڈ کرنے کی رفتار کو برقرار رکھا جاتا ہے۔
آؤٹ پٹ
نتیجہ
صفحہ لوڈ کرنے کی رفتار کو ریسپانسیو امیجز کے ذریعے بڑھایا جا سکتا ہے۔ srcset ' وصف، مختلف پکسل کثافت کی وضاحت کرتے ہوئے، ' کا استعمال کرتے ہوئے سائز 'انتساب، یا کے ذریعے' <تصویر> ' عنصر. ' <تصویر> ' عنصر کے نقطہ نظر پر غور کیا جا سکتا ہے اگر دیگر طریقوں میں سے کوئی بھی کام نہیں کرتا ہے کیونکہ یہ ایک ہی تصویر کے لئے اضافی اختیارات کے بغیر ایک غیر متوقع صورت میں ایک متبادل تصویر کا اضافہ کرتا ہے.