تصاویر کو جدید فارمیٹس میں پیش کرنے کا طریقہ

Lighthouse الرٹ کا مطلب ہے کہ اپنی JPEG اور PNG فائلوں کو WebP یا AVIF میں تبدیل کریں، اور پھر انہیں اصل تصویر کو فال بیک کے طور پر رکھتے ہوئے picture ایلیمنٹ کے ذریعے پیش کریں۔ اس آڈٹ کو حل کرنا کافی آسان ہے، کیونکہ اس کی اصلاح کسی معمارانہ ساخت کے بجائے ایک آسان عمل ہے۔

Lighthouse یہ الرٹ اس وقت دکھاتا ہے جب اسے ایسی تصاویر ملتی ہیں جو جدید فارمیٹ میں نمایاں طور پر چھوٹی ہو سکتی ہیں۔ یہ تخمینہ اس ڈاؤن لوڈ کردہ فائل کی بنیاد پر ہوتا ہے، لہذا دکھائی گئی بچت قابلِ حصول اور اکثر حقیقت کے قریب ہوتی ہے۔

Lighthouse کس چیز کی پیمائش کر رہا ہے

Lighthouse اندرونی طور پر ہر تصویر کو WebP میں دوبارہ انکوڈ کرتا ہے اور جب بچت ایک حد سے زیادہ ہوتی ہے تو رپورٹ دیتا ہے۔ رپورٹ میں موجود عدد ایک عام سفارش کے بجائے ایک واقعی تخمینہ ہوتا ہے۔

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

مارک اپ جو آڈٹ کو مطمئن کرتا ہے

picture ایلیمنٹ کا استعمال کریں جس میں پہلے AVIF، دوسرے نمبر پر WebP اور img ٹیگ میں اصل JPEG ہو۔ براؤزر پہلا سورس منتخب کرتا ہے جسے وہ سمجھتا ہے، تاکہ نئے براؤزرز کو چھوٹی فائل ملے اور پرانے براؤزرز میں بھی تصویر شو ہو۔

img ٹیگ کا ہونا ضروری ہے، کیونکہ یہ alt ٹیکسٹ، ابعاد (dimensions) اور فال بیک کو سنبھالتا ہے۔ width اور height کی خصوصیات کو چھوڑنے سے تصاویر لوڈ ہوتے وقت لے آؤٹ شفٹ ہوتا ہے، جو اس آڈٹ کو ٹھیک کرتے ہوئے Core Web Vitals کی ایک اور پیمائش کو خراب کرتا ہے۔ دونوں خصوصیات کو فال بیک تصویر کے اصل پکسل سائز پر سیٹ کریں۔

آڈٹ کو کیسے صاف کریں

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

1. Lighthouse رپورٹ کھولیں اور ان کے ناموں کی فہرست بنائیں جن میں نمایاں بچت ممکن ہے۔
2. ہر تصویر کے ڈسپلے سائز کو چیک کریں، کیونکہ بہت سے سائز زیادہ ہوتے ہیں اور غلط فارمیٹ میں بھی ہوتے ہیں۔
3. ہر تصویر کو اس کے اصل ڈسپلے کی چوڑائی کے مطابق ری سائز کریں، ہائی ڈینسٹی اسکرینز کے لیے سائز کو دگنا کریں۔
4. معیار 80 پر WebP میں تبدیل کریں، اور صفحے کی سب سے بڑی تصاویر کے لیے کوالٹی 65 پر AVIF میں۔
5. نتائج کو picture ایلیمنٹ کے ذریعے پیش کریں جس میں اصل img فال بیک موجود ہو۔
6. یہ تصدیق کرنے کے لیے Lighthouse کو دوبارہ چلائیں کہ الرٹ ختم ہو گیا ہے اور کوئی لے آؤٹ شفٹ نظر نہیں آ رہا ہے۔

مرحلہ 3 مرحلہ 4 سے زیادہ اہم ہے۔ ابعاد (Dimensions) فائل سائز کے زیادہ تر حصے کو کنٹرول کرتے ہیں، اور ایک بڑا WebP اب بھی ایک بڑی تصویر ہی رہے گا۔ بڑی تعداد میں فائلیں تبدیل کرنے میں کچھ منٹ لگتے ہیں، جبکہ مارک اپ لکھنے میں عام طور پر زیادہ وقت لگتا ہے۔

کس تصویر کے لیے کون سا فارمیٹ

کیا آپ کا پلیٹ فارم پہلے سے یہ کام کر رہا ہے

بہت سے کنٹینٹ سسٹمز اور ہوسٹس تصاویر کو خود بخود تبدیل کرتے ہیں، لہذا خود تیار کرنے سے پہلے چیک کریں۔ ایک ہی کام دو بار کرنا عام ہے اور وقت کا ضیاع ہے۔

2 منٹ میں ٹیسٹ کریں۔ شائع شدہ صفحہ کھولیں، کسی تصویر پر رائٹ کلک کریں اور اسے نیو ٹیب میں کھولیں، پھر ایڈریس بار میں فائل ایکسٹینشن پڑھیں۔ JPEG کے طور پر اپ لوڈ کی گئی فائل پر .webp ایکسٹینشن کا مطلب ہے کہ پلیٹ فارم پہلے ہی اسے تبدیل کر رہا ہے۔ Shopify، زیادہ تر WordPress ہوسٹس اور متعدد سائیٹ بلڈرز بائی ڈیفالٹ ایسا کرتے ہیں۔

الرٹ کبھی کبھی دوبارہ کیوں ظاہر ہوتا ہے

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

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

کیا آپ کو AVIF، WebP، یا دونوں کا استعمال کرنا چاہیے

زیادہ تر سائٹس پر صرف WebP استعمال کریں، اور صرف صفحے کی سب سے بڑی تصاویر کے لیے AVIF شامل کریں۔ دونوں کی سپورٹ سے تیار کرنے، محفوظ کرنے اور سنک میں رکھنے والی فائلوں کی تعداد دگنی ہو جاتی ہے، جبکہ عام تصاویر پر اس کی بچت معمولی ہوتی ہے۔

فوٹوگرافی والی سائٹس پر حساب بدل جاتا ہے، جہاں AVIF ان فائلوں پر مزید 20 سے 30 فیصد بچاتا ہے جو پہلے سے سینکڑوں کلو بائٹس میں ہوتی ہیں۔ 600 KB والی ہیرو امیج کے صفحے پر، یہ ایک حقیقی کمی ہے۔ 40 KB والے تھمب نیلز کے صفحے پر، اضافی کام سے فائدہ کم ہوتا ہے، اور صرف WebP ہی آڈٹ کو صاف کرنے کے لیے کافی ہے۔

نتائج کو صحیح طریقے سے چیک کرنا

ایکسٹینشنز کو غیر فعال کر کے پرائیویٹ ونڈو میں Lighthouse کو دوبارہ چلائیں، کیونکہ براؤزر ایکسٹینشنز پیمائش میں فرق پیدا کرتی ہیں۔ اسکورز مختلف کوششوں میں بدل بھی سکتے ہیں، لہذا ایک ہی نمبر پر بھروسہ کرنے کے بجائے 3 بار ٹیسٹ کر کے موازنہ کریں۔

فرض کرنے کے بجائے تصدیق کریں کہ براؤزر کو نیا فارمیٹ مل رہا ہے۔ ڈویلپر ٹولز کھولیں، Network ٹیب پر جائیں، تصاویر کے لحاظ سے فلٹر کریں اور صفحہ دوبارہ لوڈ کریں۔ Type کالم دکھاتا ہے کہ اصل میں کیا پیش کیا گیا تھا۔ تبدیلی کے بعد بھی JPEG دکھانے کا مطلب عام طور پر یہ ہے کہ picture ایلیمنٹ کا مارک اپ غلط ہے، یا کیشنگ لیئر پرانا ورژن دکھا رہی ہے۔

متعلقہ آڈٹس جو اس کے ساتھ ظاہر ہوتے ہیں

• Properly size images. تصویر اس جگہ سے بڑی ہے جس میں یہ ڈسپلے ہوتی ہے۔ کمپریس کرنے کے بجائے ری سائز کریں۔
• Efficiently encode images. کمپریشن بہت ہلکی ہے۔ کوالٹی کی سیٹنگ کو کم کریں۔
• Defer offscreen images. نچلے حصے میں موجود تصاویر میں سست لوڈنگ (lazy loading) شامل کریں۔
• Largest Contentful Paint element. عام طور پر آپ کی ہیرو امیج، جو سب سے پہلے توجہ کی مستحق ہے۔
• Image elements do not have explicit width and height. لے آؤٹ شفٹ کو روکنے کے لیے دونوں خصوصیات شامل کریں۔

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

اصلی متوقع بچت

جدید فارمیٹس میں تبدیل کرنے سے عام طور پر تصویری سائز میں 25 سے 35 فیصد کمی آتی ہے، اور پہلے ری سائز کرنے سے اکثر اس سے بھی زیادہ بچت ہوتی ہے۔ تصاویر سے بھرپور صفحے پر مشترکہ اثر اکثر 70 سے 80 فیصد ہوتا ہے۔

یہ بہتری Largest Contentful Paint میں نظر آتی ہے، جو یہ ماپتا ہے کہ اہم مواد کتنی تیزی سے ظاہر ہوتا ہے۔ اس پیمائش کا فیصلہ عام طور پر ایک ہی تصویر سے ہوتا ہے، لہذا ہیرو فائل کو چھوٹا کرنے کا اثر پورے صفحے کے مقابلے میں کہیں زیادہ ہوتا ہے۔ 20 چھوٹی تصاویر کو کم کرنے سے زیادہ اہم 1 بڑی تصویر کو کم کرنا ہے۔

کیا نہیں کرنا چاہیے

JPEG فال بیک کو نہ ہٹائیں، اور ان تصاویر کو تبدیل نہ کریں جنہیں وزٹرز ڈاؤن لوڈ کریں گے۔ دونوں غلطیاں معمولی اسکور کی بہتری کے لیے اصل سہولت کو ختم کر دیتی ہیں۔

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

رپورٹ میں بتائی گئی تصاویر کو تبدیل کرنا

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

براؤزر میں ڈائریکٹ بیچ کنورٹر کا استعمال کرکے فائلوں کو مقامی طور پر پروسیس کریں۔

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