تصاویر کا سائز درست کرنے کا صحیح طریقہ

اس بات کی پیمائش کریں کہ تصویر زیادہ سے زیادہ کتنی چوڑی رینڈر ہوتی ہے، ہائی ڈینسٹی اسکرینز کے لیے اسے دوگنا کریں، اور اپنی لائبریری کو اس نمبر کے مطابق ری سائز کریں۔ 800 پکسل کے سلاٹ میں 4000 پکسل کی تصویر پیش کرنے کا مطلب ہے کہ براؤزر اس سے تقریباً 25 گنا زیادہ پکسل ڈیٹا ڈاؤن لوڈ کرتا ہے جتنا وہ دکھا سکتا ہے، اور پھر باقی کو ضائع کر دیتا ہے۔

فون کنکشن پر وزیٹر اس سب کی قیمت وقت اور ڈیٹا کی صورت میں ادا کرتا ہے۔ تصاویر کا سائز درست کرنا عام طور پر کسی بھی سائٹ کے پیج ویٹ کو کم کرنے کا سب سے بڑا ذریعہ ہوتا ہے، اور اس کے لیے ری ڈیزائن کے بجائے صرف ایک بیچ کی ضرورت ہوتی ہے۔

بڑی تصاویر کا نقصان اتنا زیادہ کیوں ہوتا ہے

فائل کا سائز پکسلز کی تعداد کے ساتھ بڑھتا ہے، اس لیے چوڑائی اور اونچائی کو آدھا کرنے سے تقریباً 75 فیصد ڈیٹا کم ہو جاتا ہے۔ یہ تعلق لکیری کے بجائے کواڈریٹک (مربعی) ہوتا ہے، یہی وجہ ہے کہ نقصان تیزی سے بڑھتا ہے۔

پہلی قطار ان سائٹس پر عام معاملہ ہے جہاں ایڈیٹرز براہ راست کیمرے سے اپ لوڈ کرتے ہیں۔ براؤزر 4.2 MB ڈاؤن لوڈ کرتا ہے، اسے چھوٹا کرتا ہے، اور 180 KB کی فائل کے برابر ڈسپلے کرتا ہے۔

ڈسپلے کے اصل سائز کی پیمائش کیسے کریں

اپنے لائیو پیج پر تصویر پر رائٹ کلک کریں، Inspect کو منتخب کریں، اور اصل ڈائمینشنز کے بجائے ڈسپلے ہونے والی ڈائمینشنز کو پڑھیں۔ براؤزرز دونوں اعداد و شمار بتاتے ہیں، اور ان کے درمیان کا فرق ہی ضائع ہونے والا ڈیٹا ہے۔

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

ہائی ڈینسٹی اسکرینز کے لیے دوگنا کرنے کا اصول

ڈسپلے کی چوڑائی کو 2 سے ضرب دیں اور وہیں رک جائیں، کیونکہ اس ڈینسٹی سے آگے کی اسکرینز پر کوئی ایسی بہتری نظر نہیں آتی جسے کوئی محسوس کر سکے۔ 700 پکسلز پر ڈسپلے ہونے والی تصویر کو 1400 پر ایکسپورٹ کیا جانا چاہیے۔

تین گنا کرنے کی تجویز کبھی کبھار دی جاتی ہے لیکن اس کا جواز شاذ و نادر ہی ہوتا ہے۔ عام دیکھنے کے فاصلے پر 2 اور 3 گنا ڈینسٹی کے درمیان فرق ناقابل شناخت ہوتا ہے، جبکہ فائل کا سائز آدھے سے زیادہ بڑھ جاتا ہے۔ 2 گنا ڈینسٹی پر زیادہ کمپریس کرنا 3 گنا پر ہلکا کمپریس کرنے سے بہتر نتیجہ دیتا ہے، کیونکہ اضافی پکسلز کمپریشن کو چھپا دیتے ہیں۔

ری سائز کرنے کے لیے عام ڈسپلے چوڑائیاں

• آرٹیکل باڈی امیج: تقریباً 700 px ڈسپلے ہوتی ہے، 1400 px پر ایکسپورٹ کریں۔
• فل وڈتھ ہیرو: 1920 px تک ڈسپلے ہوتی ہے، 1920 px پر ایکسپورٹ کریں اور زیادہ کمپریس کریں۔
• ہاف وڈتھ فیچر: تقریباً 600 px ڈسپلے ہوتی ہے، 1200 px پر ایکسپورٹ کریں۔
• پروڈکٹ گرڈ تھمب نیل: تقریباً 300 px ڈسپلے ہوتی ہے، 600 px پر ایکسپورٹ کریں۔
• مصنف یا پروفائل تصویر: تقریباً 80 px ڈسپلے ہوتی ہے، 160 px پر ایکسپورٹ کریں۔
• ہیڈر میں لوگو: تقریباً 180 px ڈسپلے ہوتی ہے، 360 px پر ایکسپورٹ کریں یا ویکٹر گرافکس استعمال کریں۔

فل وڈتھ تصاویر مستثنیٰ کیوں ہیں

فل وڈتھ بینر کا کوئی فکسڈ ڈسپلے سائز نہیں ہوتا، اس لیے اسے 1920 پکسلز تک محدود رکھیں اور دوگنا کرنے کے بجائے اسے زیادہ کمپریس کریں۔ فل وڈتھ تصویر کو 3840 پکسلز تک دوگنا کرنے سے ایک ایسی فائل بنتی ہے جس کا کوئی بھی پیج جواز نہیں دے سکتا۔

بینرز عام طور پر فاصلے سے دیکھے جاتے ہیں اور ان میں پروڈکٹ فوٹو گرافی کے مقابلے میں باریک تفصیلات کم ہوتی ہیں، جس کا مطلب ہے کہ ان پر جارحانہ کمپریشن کم محسوس ہوتا ہے۔ WebP میں 70 کوالٹی پر 1920 پکسل کا بینر عام طور پر 200 KB سے کم رہتا ہے اور ہر اسکرین پر درست نظر آتا ہے، جبکہ 3840 پکسل والا ورژن 4 گنا زیادہ وزن پر بھی کوئی واضح فائدہ نہیں دیتا۔

پوری لائبریری کو کیسے ٹھیک کریں

کسی موجودہ سائٹ کو صحیح طریقے سے ری سائز کرنے کے لیے، ان 6 مراحل پر عمل کریں۔

1. اپنے ڈیزائن میں امیج سلاٹس کی فہرست بنائیں، جو عام طور پر درجنوں کے بجائے 4 سے 6 الگ الگ سائز ہوتے ہیں۔
2. لائیو پیج پر براؤزر انسپکٹر کا استعمال کرتے ہوئے ہر سلاٹ کی ڈسپلے چوڑائی کی پیمائش کریں۔
3. اپنا ایکسپورٹ سائز حاصل کرنے کے لیے ہر چوڑائی کو دوگنا کریں۔
4. لائبریری کو سلاٹ کے حساب سے فولڈرز میں ترتیب دیں، کیونکہ ایک بیچ اس میں موجود ہر فائل پر ایک ہی سائز لاگو کرتا ہے۔
5. ہر فولڈر کو اس کے ٹارگٹ سائز پر ری سائز کریں، پھر اسی پاس میں کمپریس اور کنورٹ کریں۔
6. فائلوں کو تبدیل کریں لیکن نام وہی رکھیں تاکہ موجودہ صفحات کام کرتے رہیں۔

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

ریسپونسیو تصاویر اور srcset ایٹریبیوٹ

کئی سائز پیش کرنے کے لیے srcset کا استعمال کریں اور براؤزر کو ہر ڈیوائس کے لیے صحیح سائز منتخب کرنے دیں۔ اس طرح ایک فون 400 پکسل کی فائل ڈاؤن لوڈ کرتا ہے جبکہ ایک ڈیسک ٹاپ اسی مارک اپ سے 1400 پکسل کی فائل ڈاؤن لوڈ کرتا ہے۔

ہر تصویر کے لیے 3 چوڑائیاں تیار کریں، عام طور پر 400، 800 اور 1600 پکسلز، اور انہیں ان کی پکسل چوڑائی کے ساتھ درج کریں تاکہ براؤزر انتخاب کر سکے۔ زیادہ تر کنٹینٹ سسٹمز اپ لوڈ پر یہ خود بخود تیار کرتے ہیں، لہذا چیک کریں کہ آپ کا پلیٹ فارم پہلے سے کیا کرتا ہے۔ جہاں یہ کرتا ہے، وہاں بھی صحیح سائز کے اصل کو اپ لوڈ کرنا ہر تیار کردہ ویرینٹ کو بہتر بناتا ہے۔

ہمیشہ کمپریس کرنے سے پہلے ری سائز کریں

پہلے ری سائز کرنے کا مطلب ہے کہ کمپریشن کو کم کام کرنا پڑتا ہے، اس لیے فائل چھوٹی رہنے کے ساتھ ساتھ کوالٹی بھی برقرار رہتی ہے۔ پہلے کمپریس کرنے اور بعد میں ری سائز کرنے سے وہ تفصیلات ضائع ہو جاتی ہیں جنہیں آپ پھر سے پھینک دیتے ہیں۔

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

اس سے پیج کی رفتار پر کیا اثر پڑتا ہے

تصاویر کا سائز درست کرنے سے عام طور پر ایسی سائٹ پر تصاویر کا وزن 60 سے 90 فیصد تک کم ہو جاتا ہے جس نے پہلے کبھی ایسا نہ کیا ہو۔ یہ بہتری کسی بھی فارمیٹ کی تبدیلی سے بڑی ہے اور عام طور پر دیگر تمام آپٹیمائزیشنز کے مجموعے سے بھی بڑی ہے۔

اس کا اثر موبائل وزیٹرز پر زیادہ ہوتا ہے، جہاں کنکشن سست ہوتے ہیں اور ڈیٹا مہنگا ہوتا ہے۔ Largest Contentful Paint براہ راست بہتر ہوتا ہے، کیونکہ اس پیمائش کا فیصلہ عام طور پر ایک بڑی تصویر سے ہوتا ہے۔ Lighthouse میں Properly size images کے آڈٹ کو کلیئر کرنے سے اکثر ایک ہی وقت میں 2 یا 3 متعلقہ وارننگز بھی ختم ہو جاتی ہیں۔

فٹ کرنے کے لیے تصویر کو کبھی بڑا نہ کریں

بڑا کرنے سے ایسے پکسلز شامل ہوتے ہیں جو کیمرے نے کبھی کیپچر نہیں کیے ہوتے، اس لیے نتیجہ دھندلا ہوتا ہے اور فائل بغیر کسی فائدے کے بڑی ہو جاتی ہے۔ سائز چھوٹا کرنا ہمیشہ محفوظ ہوتا ہے، جبکہ سائز بڑا کرنا وہ واحد عمل ہے جو یقینی طور پر خراب نظر آتا ہے۔

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

بڑی تصاویر کے لیے پیج کو چیک کرنا

ڈویلپر ٹولز کھولیں، Network ٹیب پر جائیں، تصاویر کے لحاظ سے فلٹر کریں اور پیج کو دوبارہ لوڈ کریں۔ فہرست ہر تصویر کو اس کے ٹرانسفر سائز کے ساتھ دکھاتی ہے، جو سب سے بڑے سائز سے ترتیب دی گئی ہوتی ہے۔

500 KB سے زیادہ کی کسی بھی ایک تصویر کی جانچ پڑتال ضروری ہے، اور کوئی بھی پیج جہاں تصاویر کا کل سائز 2 MB سے زیادہ ہو، وہاں مسئلہ ہے۔ Elements پینل میں کسی تصویر پر ہور کریں تاکہ اس کا اصل اور ڈسپلے سائز ساتھ ساتھ دیکھا جا سکے۔ ان 2 نمبروں کے درمیان بڑا فرق ہی غلط سائز کی تصویر کی تعریف ہے، اور یہ سیکنڈوں میں نظر آ جاتا ہے۔

ایک ہی بیچ میں لائبریری کو ری سائز کرنا

تصاویر کو انفرادی طور پر ری سائز کرنے کے بجائے، ایک بار ٹارگٹ چوڑائی سیٹ کریں اور اسے فولڈر کی ہر فائل پر لاگو کریں۔ جب کام بیچ میں کیا جائے تو کئی سو تصاویر کی لائبریری منٹوں میں ری سائز ہو جاتی ہے۔

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