تصاویر کو بہتر بنانے سے ویب سائٹ کیوں بہتر ہوتی ہے
تصاویر عام طور پر کسی صفحے کے ڈاؤن لوڈ کیے گئے ڈیٹا کا ایک اہم حصہ ہوتی ہیں۔ ایک بڑی فائل مواد کی ظاہری ہونے کو دیر سے پہنچاتی ہے، موبائل ڈیٹا زیادہ خرچ کرتی ہے اور وزیٹر کے تجربے کو خراب کر سکتی ہے۔ آپٹیمائزیشن تین فیصلوں کا مجموعہ ہے: ابعاد، فارمیٹ اور کمپریشن کی سطح۔
تمام تصاویر کے لیے کوئی کامل حد موجود نہیں ہے۔ ایک تھمب نیل کی وزنی مقدار پوری اسکرین پر دکھائی جانے والی تصویر سے بہت کم ہونی چاہیے۔ مقصد یہ ہے کہ حقیقی جگہ کے لیے کافی پکسلز اور معیار فراہم کیا جائے، بغیر اس کے کہ براؤزر کو ایسی معلومات ڈاؤن لوڈ کرنے پر مجبور کیا جائے جو وہ استعمال نہیں کرے گا۔
تجویز کردہ مرحلہ وار بہاؤ
- زیادہ سے زیادہ چوڑائی کی شناخت کریں جس کے ساتھ تصویر ڈیزائن میں ظاہر ہوگی۔
- کمپریس کرنے سے پہلے فریم کو کاٹ لیں تاکہ وہ حصے نہ رہیں جو ہٹا دیے جائیں گے۔
- مواد اور شفافیت کی ضرورت کے مطابق فارمیٹ منتخب کریں۔
- فائل کھولیں امیج کمپریسر اور درمیانے سے اعلیٰ معیار کی جانچ کرتا ہے۔
- وزن کا موازنہ کریں اور متن، کنارے، چہرے اور گریڈینٹز کا جائزہ لیں۔
- نتیجہ شائع کریں اور موبائل اور ڈیسک ٹاپ پر صفحہ چیک کریں۔
ڈائمینشنز: ضرورت سے زیادہ پکسل نہ اپ لوڈ کریں
اگر کسی کارڈ میں 600 پکسل چوڑائی کی تصویر دکھائی جاتی ہے، تو 5000 پکسل کی تصویر لوڈ کرنا عام طور پر ضائع کرنا ہے۔ براؤزر اسے بصری طور پر کم کر دے گا، لیکن پہلے اسے پوری فائل ڈاؤن لوڈ کرنی پڑے گی۔ ڈیزائن کے لیے زیادہ سے زیادہ مطلوبہ سائز کے قریب ایک ورژن تیار کریں۔
ہائی ڈینسٹی سکرین کے لیے تقریباً دو گنا بڑا ورژن فراہم کرنا مفید ہو سکتا ہے، لیکن بہترین طریقہ یہ ہے کہ سائٹ ریسپونسیو تصاویر استعمال کرے۔ ایس آر سی سیٹ y سائز۔ اس طرح ہر ڈیوائس ایک مناسب ورژن ڈاؤن لوڈ کرتی ہے بجائے ایک ہی بڑی فائل کے۔
کون سا فارمیٹ منتخب کیا جائے
- JPG: غیر شفاف تصاویر کے لیے اچھی مطابقت اور مناسب سائز۔
- WebP: تصاویر اور ویب گرافکس کے لیے مفید؛ یہ شفافیت برقرار رکھ سکتا ہے اور کمپیکٹ فائلز فراہم کر سکتا ہے۔
- PNG: شفافیت، واضح متن والے اسکرین شاٹس اور سادہ گرافکس کے لیے موزوں؛ تصویروں میں وزن زیادہ ہو سکتا ہے۔
- SVG: لوگوز اور ویکٹر آئیکنز کے لیے مثالی جب فائل محفوظ ہو اور ڈیزائن ویکٹر کے طور پر بنایا گیا ہو۔
فارمیٹ تبدیل کرنے کا مطلب فائل کا چھوٹا ہونا نہیں ہوتا۔ ہمیشہ نتیجہ موازنہ کریں اور اصل فارمیٹ تب رکھیں جب وہ سب سے زیادہ مؤثر آپشن ہو۔ مشاورت کے لیے دیکھیں۔ JPG، PNG، اور WebP کے درمیان موازنہ اگر آپ کو معلوم نہیں کہ کون سا منتخب کریں۔
کمپریشن کوالٹی کا انتخاب کیسے کریں
ایک ایسی سیٹنگ کے ساتھ شروع کریں جو ظاہری شکل کو ترجیح دے اور پھر آہستہ آہستہ گھٹائیں۔ تصاویر انٹرفیس کی اسکرین شاٹس، ڈایاگرامز اور چھوٹے متن کے مقابلے میں کمپریشن زیادہ برداشت کرتی ہیں۔ اگر ہیلوز، بلاکس یا دھندلے کنارے ظاہر ہوں تو کوالٹی بڑھائیں یا کسی دوسرے فارمیٹ کو آزمائیں۔
فائل کا جائزہ پیج کے اندر لیں، صرف بڑی نظر میں نہیں۔ جو چھوٹا فرق 300٪ پر نظر آتا ہے وہ عام سائز میں شاید محسوس نہ ہو؛ البتہ، کسی کارڈ پر غیر قابل پڑھائی حرف واقعی مسئلہ ہے۔
کمپریشن اچھے نفاذ کا نعم البدل نہیں ہے
فائل کو بہتر بنانے کے علاوہ، یہ خصوصیات کے ساتھ جگہ محفوظ رکھتا ہے چوڑائی y قد مواد کے چھلانگ کو روکنے کے لیے۔ تصویروں کو جو پہلے نظر آنے والے بلاک سے باہر ہیں ڈیلےڈ لوڈ استعمال کریں، لیکن اگر صفحہ سمجھنے کے لیے اہم ہے تو مرکزی تصویر کو مت دیر کریں۔
یہ بھی اچھا خیال ہے کہ ورژنڈ نام والی فائلوں کے لیے طویل کیش کی تعریف کی جائے اور CSS کے ذریعے ایک ہی تصویر کو مختلف ریزولوشن میں لوڈ کرنے سے گریز کیا جائے۔ ان فیصلوں کے لیے سائٹ میں تبدیلیاں ضروری ہیں، لیکن کمپریشن کے دوران حاصل ہونے والی بچت کی تکمیل کرتے ہیں۔
عام غلطیاں
سائز کا فیصلہ کرنے سے پہلے کمپریس کریں
بعد میں ری سائز کرنے سے فائل دو مرتبہ پروسیس کرنی پڑتی ہے اور نقصان جمع ہو سکتا ہے۔ پہلے فریم اور ابعاد کا فیصلہ کریں؛ آخر میں سمپی کریں۔
اسکرین شاٹس کو کم معیار کے ساتھ JPG میں تبدیل کریں
باریک حروف اور لکیریں دھبے پیدا کر سکتی ہیں۔ PNG یا WebP کو زیادہ معیار پر آزما کر دیکھیں اور وزن کا موازنہ کریں۔
ہیڈر کے طور پر ایک چھوٹی تصویر استعمال کریں
اسے بڑھانے سے تفصیل واپس نہیں آتی۔ کافی بڑے ماخذ سے شروع کریں اور اس ورژن سے چھوٹے متبادل تیار کریں۔
اکثر پوچھے جانے والے سوالات
ویب امیج کا وزن کتنا ہونا چاہیے؟
یہ اس کے ابعاد، اہمیت اور پیچیدگی پر منحصر ہے۔ معیار کے قابل قبول سطح کو برقرار رکھتے ہوئے کم از کم وزن کو معیار کے طور پر استعمال کریں، بجائے اس کے کہ کوئی عالمی عدد حاصل کرنے کی کوشش کریں۔
کیا مجھے تمام تصاویر کو WebP میں تبدیل کرنا چاہیے؟
ضروری نہیں۔ WebP مفید ہے، لیکن ایک سادہ PNG یا پہلے سے بہتر شدہ فائل بہتر نہیں ہو سکتی۔ ایک نمونہ تبدیل کریں، ماپیں اور اصل فائلیں محفوظ رکھیں۔
کیا صرف تصاویر کو کمپریس کرنا پوزیشننگ بہتر کرتا ہے؟
تجربے اور کارکردگی میں مدد دیتا ہے، لیکن درجہ بندی بھی مفید مواد، کرالنگ، لنکس، تلاش کی نیت اور بہت سی دوسری علامات پر منحصر ہے۔ کمپریشن ایک اچھی طرح تیار کردہ ویب کا حصہ ہے۔
ہلکی تصویر تیار کریں
معیار کو ایڈجسٹ کریں یا ہدف سائز مقرر کریں، نتیجہ موازنہ کریں اور وہ ورژن ڈاؤن لوڈ کریں جو آپ کے صفحہ کے مطابق سب سے بہتر ہو۔
ویب کے لیے تصویر کو کمپریس کریں