براؤزر پر مبنی تصویر کمپریشن کیسے کام کرتا ہے
کمپریشن کی ہر پاس مکمل طور پر JavaScript میں چلتی ہے۔ کوئی کوڈیک لائبریری ڈاؤن لوڈ نہیں ہوتی اور کوئی سرور شامل نہیں ہوتا۔ براؤزر کی اپنی Canvas API تصویر کو ڈی کوڈ کرتی ہے، اسے کم کوالٹی پر دوبارہ انکوڈ کرتی ہے، اور آپ کو ایک Blob تھماتی ہے جسے صفحہ پریویو، ڈاؤن لوڈ، یا zip کر سکتا ہے۔ چونکہ ہر قدم ٹیب کے سینڈ باکس میں رہتا ہے، اصل فائلیں کبھی نیٹ ورک سے نہیں گزرتیں۔
- ہر اپلوڈ شدہ فائل کو Blob کے طور پر پڑھتا ہے اور آبجیکٹ URL بناتا ہے تاکہ براؤزر بائٹس سرور پر کاپی کیے یا ڈسک پر لکھے بغیر مقامی طور پر ڈی کوڈ کر سکے۔
- ڈی کوڈ شدہ تصویر کو اصل پکسل ڈائمینشنز پر آف اسکرین Canvas عنصر پر کھینچتا ہے، دوبارہ انکوڈنگ کے لیے تیار۔
- پکسلز کو دوبارہ انکوڈ کرنے کے لیے
canvas.toBlob(callback, mimeType, quality)کال کرتا ہے۔ کوالٹی موڈ میں سلائیڈر ویلیو براہ راست انکوڈر کی کوانٹائزیشن سیٹنگ پر میپ ہوتی ہے؛ ہدف سائز موڈ میں صفحہ کوالٹی ویلیو کو تقسیم کرتا رہتا ہے جب تک آؤٹ پٹ Blob آپ کے بائٹ بجٹ میں فٹ نہ ہو جائے۔ - اصل سائز، کمپریس سائز، اور بچت فیصد کے ساتھ پہلے/بعد کا جائزہ دکھاتا ہے، پھر فی تصویر ڈاؤن لوڈ یا پوری بیچ کے لیے ایک ZIP پیش کرتا ہے۔ ZIP fflate استعمال کرتے ہوئے میموری میں بنتا ہے، جو پہلے استعمال پر لوڈ ہونے والی 8 KB لائبریری ہے۔
تصاویر کمپریس کیوں کریں؟
- چھوٹی تصاویر تیز لوڈ ہوتی ہیں۔ 4 MB hero امیج کو 600 KB تک کم کرنا Largest Contentful Paint کو براہ راست بہتر بناتا ہے، جو Core Web Vitals میں سے ایک ہے جو Google رینکنگ کے لیے استعمال کرتا ہے۔ کئی تصاویر والے صفحے پر یہ بچت مل کر تیز first paint بناتی ہے۔
- اپلوڈ اور منسلکہ حدیں ہر طرف ہیں۔ بہت سے CMS پلیٹ فارمز، ٹکٹنگ ٹولز، اور ای میل سسٹمز 1 یا 2 MB سے زیادہ فائلیں رد کر دیتے ہیں۔ ایک فوری کمپریشن پاس مکمل ایڈیٹر کھولے بغیر تصویر کو حد سے نیچے لاتی ہے۔
- بینڈوڈتھ اور اسٹوریج بڑے پیمانے پر پیسہ کھاتے ہیں۔ مکمل سائز PNG کی بجائے 0.8 کوالٹی پر WebP بھیجنا امیج پے لوڈ ایک تہائی یا اس سے زیادہ کم کر سکتا ہے، جو CDN ایگریس بلز اور آپ کے وزیٹرز کے موبائل ڈیٹا کے استعمال کو کم کرتا ہے۔
- کچھ تصاویر اصلاً اپلوڈ نہیں ہونی چاہیے۔ چونکہ سب کچھ آپ کے براؤزر میں چلتا ہے، شناختی دستاویزات کی اسکینز، طبی تصاویر، اور اندرونی اسکرین شاٹس آپ کے آلے پر رہتے ہیں — پریشانی کا کوئی تیسرے فریق سرور جیسے TinyPNG نہیں۔
عام استعمالات
کمپریشن تب ضروری ہو جاتا ہے جب تصویر اس جگہ سے بڑی ہو جہاں وہ جانی ہے۔ تین نمونے جو ہم بار بار دیکھتے ہیں۔
- آن لائن اسٹور کے لیے پروڈکٹ تصاویر تیار کرنا۔ JPEG اصل کو 0.8 کوالٹی (یا 200 KB ہدف) پر کمپریس کیا جاتا ہے تاکہ اسٹور فرنٹ تیز رہے اور موبائل پر Core Web Vitals پاس کرے۔
- بگ ٹریکر یا وکی میں منسلک کرنے سے پہلے اسکرین شاٹس چھوٹی کرنا۔ 0.85 کوالٹی پر JPEG میں تبدیل شدہ PNG کیپچرز کی بیچ اکثر دسیوں میگابائٹس سے چند تک گر جاتی ہے۔
- تصویر کو اپلوڈ حد سے نیچے لانا — جاب ایپلی کیشن پورٹل جو 1 MB سے زیادہ فائلیں رد کرے، تنگ منسلکہ حد والا ای میل سسٹم، یا فورم اوتار جسے بائٹ بجٹ میں فٹ ہونا ہو۔
ایک عملی مثال: 4 MB JPEG سے 400 KB
فون کیمرے سے سیدھا 4 MB JPEG ایک عام پے لوڈ ہے جو اپلوڈ کیپس میں پھنستا اور صفحات سست کرتا ہے۔ یہ کمپریشن کی بچت کا منصفانہ بینچ مارک ہے۔
JPEG کو اپلوڈ زون میں چھوڑیں، فارمیٹ JPEG پر رکھیں، اور یا تو کوالٹی سلائیڈر 0.7 تک نیچے کھینچیں یا ہدف سائز موڈ پر سوئچ کریں اور 400 KB ٹائپ کریں۔ کوالٹی موڈ میں Canvas پائپ لائن ایک بار دوبارہ انکوڈ کرتی اور نتیجہ دکھاتی ہے، عموماً تصویر کے حساب سے 500 سے 700 KB کے درمیان۔ ہدف سائز موڈ میں صفحہ چند کوالٹی ویلیوز آزماتا، 400 KB سے کم فٹ ہونے والی سب سے اونچی قدر پر ٹھہرتا، اور بچت فیصد بتاتا ہے۔ واحد فائل لینے کے لیے کارڈ پر ڈاؤن لوڈ کلک کریں، یا اگر آپ نے کئی تصاویر ایک ساتھ کمپریس کی ہیں تو ڈاؤن لوڈ .zip کلک کریں۔ اس سائز کی تصویر کے لیے پوری راؤنڈ ٹرپ ایک سیکنڈ سے کہیں کم لیتی ہے اور صفحہ خود لوڈ ہونے کے بعد کوئی بینڈوڈتھ خرچ نہیں ہوتی۔
کوالٹی موڈ اور ہدف سائز موڈ میں کیا فرق ہے؟
کوالٹی موڈ آپ کو 0.1 سے 1.0 تک ایک سلائیڈر دیتا ہے جو JPEG یا WebP انکوڈر کی کوانٹائزیشن سیٹنگ پر میپ ہوتا ہے — کم نمبر چھوٹی فائلیں اور زیادہ نظر آنے والی خامیاں مطلب۔ ہدف سائز موڈ مسئلہ الٹا کر دیتا ہے: آپ کلوبائٹس میں سائز بتائیں اور صفحہ کوالٹی ویلیو کو تقسیم کرتا رہتا ہے، چند بار انکوڈ کرتے ہوئے جب تک آپ کے بجٹ میں فٹ ہونے والی سب سے اونچی کوالٹی نہ ملے۔ ہدف سائز موڈ تب مفید ہے جب سخت حد اہم ہو (جیسے 1 MB اپلوڈ لمٹ)؛ کوالٹی موڈ تیز اور بہتر ہے جب آپ صرف پیش گوئی کے قابل بصری نتیجہ چاہتے ہوں۔ PNG بے نقصان ہے اس لیے نہ کوئی موڈ اس پر لاگو ہوتا ہے۔
کیا یہ میرے آلے پر ہوتا ہے؟
جی ہاں، مکمل طور پر۔ صفحہ میموری میں ہر تصویر کو ڈی کوڈ اور ری انکوڈ کرنے کے لیے براؤزر کی مقامی Canvas API اور Web File API استعمال کرتا ہے۔ کوئی تصویری ڈیٹا سرور کو نہیں بھیجا جاتا، کوئی عارضی اپلوڈ نہیں، کوئی کلاؤڈ راؤنڈ ٹرپ نہیں۔ آپ خود تصدیق کر سکتے ہیں: DevTools کھولیں، Network پینل پر سوئچ کریں، اور ایک کمپریشن چلائیں۔ صرف آؤٹ باؤنڈ درخواستیں جو آپ دیکھیں گے وہ ابتدائی صفحہ لوڈ اور اشتہار کالز ہیں۔ تصویر نما کچھ بھی ٹیب سے نہیں نکلتا۔
PNG کمپریس کرنے سے بعض اوقات اس کا سائز بہت کم کیوں گھٹتا ہے؟
PNG بے نقصان فارمیٹ ہے اس لیے Canvas API اسے چھوٹا کرنے کے لیے تفصیل نہیں پھینک سکتی — وہ صرف وہی پکسلز دوبارہ پیک کر سکتی ہے۔ تصاویر کے لیے PNG پہلے ہی بڑا ہوتا ہے اور بے نقصان ری انکوڈنگ بہت کم بچاتی ہے۔ اصل فائدہ آؤٹ پٹ فارمیٹ JPEG یا WebP میں بدلنے سے آتا ہے جو تصاویر کے لیے موزوں lossy کمپریشن استعمال کرتے ہیں اور اکثر 4 سے 10 گنا چھوٹے ہو جاتے ہیں۔ PNG صرف تب رکھیں جب آپ کو بے نقصان کوالٹی یا شفافیت چاہیے؛ ورنہ تصاویر کے لیے JPEG یا بہترین سائز-کوالٹی توازن کے لیے WebP چنیں۔
مجھے کون سا فارمیٹ چننا چاہیے؟
تصاویر کے لیے 0.8 کوالٹی پر WebP بہترین سائز-کوالٹی توازن دیتا ہے اور 2021 سے بھیجے جانے والے ہر براؤزر میں سپورٹ ہے؛ JPEG محفوظ عالمی آپشن ہے جب منزل پرانی یا زیادہ سخت ہو۔ PNG صرف تب چنیں جب آپ کو بے نقصان کوالٹی یا ایلفا چینل چاہیے — لائن آرٹ، UI اسکرین شاٹس، شفافیت والے لوگو۔ اگر آپ صفحہ کی رفتار بہتر کر رہے ہیں اور آپ کے قارئین جدید براؤزر استعمال کرتے ہیں تو WebP تقریباً ہمیشہ درست انتخاب ہے؛ اگر آپ پرانے CMS یا پرنٹ پائپ لائن کو کھانا کھلا رہے ہیں جو WebP رد کرے تو JPEG پر قائم رہیں۔
اپنی تصاویر چھوڑیں، کوالٹی لیول یا ہدف سائز چنیں، کمپریس کریں۔ سب کچھ آپ کے ٹیب میں چلتا ہے۔ کوئی اپلوڈ نہیں، کوئی اکاؤنٹ نہیں، سرور کی قطار میں انتظار نہیں۔