ویب سائٹ پر تصاویر تیزی سے لوڈ کیسے کریں
پانچ تبدیلیاں جو کسی بھی ویب سائٹ پر تصاویر کا وزن کم کرتی ہیں، اثر کے لحاظ سے ترتیب وار۔
زیادہ تر ویب سائٹس پر وزیٹر جو کچھ ڈاؤن لوڈ کرتا ہے اس کا بڑا حصہ تصاویر ہوتی ہیں۔ فون سے لی گئی ایک غیر آپٹمائزڈ تصویر پورے باقی صفحے سے زیادہ بھاری ہو سکتی ہے۔ تصاویر کو ٹھیک کرنا عموماً رفتار بڑھانے کا سب سے بڑا اور سب سے سستا طریقہ ہوتا ہے، اور تیز صفحات بہتر رینک کرتے ہیں، وزیٹرز کو زیادہ دیر روکتے ہیں اور زیادہ فروخت لاتے ہیں۔
1. تصاویر اسی سائز پر اپ لوڈ کریں جس پر وہ دکھائی جاتی ہیں
فون سے سیدھی آئی تصویر 4000 پکسل یا اس سے زیادہ چوڑی ہوتی ہے۔ ویب سائٹ پر مواد کا کالم شاذ و نادر ہی 1200 پکسل سے زیادہ چوڑا ہوتا ہے، اور کارڈ یا تھمب نیل تو اس سے کہیں چھوٹے ہوتے ہیں۔ ہر اضافی پکسل ڈاؤن لوڈ ہوتا ہے اور پھر براؤزر اسے ضائع کر دیتا ہے۔ اپ لوڈ کرنے سے پہلے سائز تبدیل کریں: پوری چوڑائی والے بینرز کے لیے تقریباً 2000 پکسل (تاکہ زیادہ ڈینسٹی والی اسکرینوں پر بھی واضح رہیں)، مواد کی تصاویر کے لیے 1200 سے 1600، اور کارڈز کے لیے 600 سے 800۔ سائز تبدیل کرنے کا ٹول پورا فولڈر ایک ساتھ کر دیتا ہے۔
2. کمپریس کریں
درست پیمائش ہو تو باقی کام کمپریشن کر دیتا ہے۔ کوالٹی 80 پر محفوظ کی گئی تصویر ویب صفحے پر کوالٹی 100 والی تصویر جیسی ہی لگتی ہے اور اکثر اس کا سائز ایک تہائی ہوتا ہے۔ امیج کمپریسر ایک ساتھ کئی فائلیں سنبھالتا ہے اور ہر فائل کی بچت دکھاتا ہے۔
3. WebP استعمال کریں
WebP ہر موجودہ براؤزر میں چلتی ہے اور عموماً اسی نظر آنے والی کوالٹی پر JPG سے 25 سے 35 فیصد چھوٹی ہوتی ہے، اور شفافیت کی سپورٹ کی وجہ سے یہ بہت سی PNG فائلوں کا متبادل بھی بن جاتی ہے۔ JPG سے WebP یا PNG سے WebP کے ذریعے تبدیل کریں۔ AVIF اس سے بھی چھوٹی ہوتی ہے لیکن اسے بنانے میں زیادہ وقت لگتا ہے اور اپ لوڈ سسٹمز میں اس کی سپورٹ اتنی عام نہیں، اس لیے عملی طور پر WebP ہی بہترین ڈیفالٹ ہے۔
4. مواد کے لحاظ سے درست فارمیٹ چنیں
| مواد | بہترین فارمیٹ |
|---|---|
| تصاویر | WebP، یا جہاں WebP قبول نہ ہو وہاں JPG |
| لوگو اور آئیکنز | اگر دستیاب ہو تو SVG، ورنہ PNG یا WebP |
| متن والے اسکرین شاٹس | PNG یا lossless WebP |
| سادہ اینیمیشنز | GIF کے بجائے ایک مختصر ویڈیو |
5. براؤزر کو سمجھداری سے لوڈ کرنے میں مدد دیں
- Lazy loading۔ پہلی اسکرین سے نیچے کی تصاویر صرف اس وقت لوڈ ہونی چاہییں جب وزیٹر اسکرول کر کے ان کے قریب پہنچے۔ زیادہ تر پلیٹ فارم یہ خود کر دیتے ہیں؛ سادہ HTML میں، شروع میں نظر نہ آنے والے img ٹیگز میں loading="lazy" شامل کریں۔
- پیمائش۔ ہر تصویر کو چوڑائی اور اونچائی دیں تاکہ تصاویر آتے وقت صفحہ اچھلتا نہ رہے۔ لے آؤٹ شفٹ Google کے Core Web Vitals میں سے ایک ہے۔
- مرکزی تصویر سب سے پہلے۔ صفحے کے اوپر والی بڑی تصویر، جو عموماً Largest Contentful Paint شمار ہوتی ہے، کبھی lazy load نہیں ہونی چاہیے۔ اسے جتنی جلدی ممکن ہو لوڈ ہونا چاہیے۔
اس سے کتنا فرق پڑتا ہے
فون سے سیدھی آئی دس تصاویر والا ایک عام صفحہ 30 MB کا ہو سکتا ہے۔ مناسب چوڑائی پر سائز تبدیل کرنے اور کمپریس کرنے کے بعد وہی صفحہ عموماً تقریباً 2 MB کا رہ جاتا ہے۔ WebP میں تبدیل کرنے پر 1.4 MB کے قریب۔ موبائل کنکشن پر یہ ایک سیکنڈ میں کھلنے والے صفحے اور ایسے صفحے کا فرق ہے جسے بہت سے وزیٹرز بیچ میں چھوڑ کر چلے جاتے ہیں۔
اپنے نتائج کی جانچ
Google کا PageSpeed Insights اور Chrome کے ڈویلپر ٹولز میں موجود Lighthouse پینل، دونوں ضرورت سے بڑی تصاویر، WebP میں ہونی چاہییں ایسی تصاویر، اور Largest Contentful Paint عنصر کی فہرست دکھاتے ہیں۔ انہیں تبدیلی سے پہلے اور بعد میں چلائیں، اور سب سے پہلے ان صفحات پر توجہ دیں جن پر سب سے زیادہ ٹریفک آتی ہے۔