تصاویر کا سائز تبدیل کریں _

براؤزر پر مبنی امیج ری سائزنگ کیسے کام کرتی ہے

ہر ری سائز ایک مختصر پائپ لائن ہے جو مکمل طور پر JavaScript میں چلتی ہے۔ کوئی کوڈیک لائبریری ڈاؤن لوڈ نہیں ہوتی اور کوئی سرور شامل نہیں ہوتا۔ براؤزر کی اپنی Canvas API فائل کو ڈی کوڈ کرتی ہے، اسے ہدف سائز پر دوبارہ کھینچتی ہے، اور میموری میں دوبارہ انکوڈ کرتی ہے، پھر ایک Blob آپ کو دیتی ہے جسے صفحہ پریویو یا zip کر سکتا ہے۔ چونکہ ہر مرحلہ ٹیب کے سینڈ باکس کے اندر رہتا ہے، اصل فائلیں کبھی نیٹ ورک تک نہیں پہنچتیں۔

1. ہر اپلوڈ شدہ فائل کو Blob کے طور پر پڑھتا ہے اور آبجیکٹ URL بناتا ہے تاکہ براؤزر اسے مقامی طور پر ڈی کوڈ کر سکے، بائٹس سرور کو کاپی کیے یا ڈسک پر لکھے بغیر۔
2. آپ کے منتخب موڈ سے ہدف طول و عرض نکالتا ہے — لمبی ترین سائیڈ کیپ، عین چوڑائی اور اونچائی، یا فیصد اسکیل۔ آسپیکٹ ریشو لاک ایک فیلڈ ایڈٹ کرنے پر تناسب درست رکھتا ہے۔
3. ہدف سائز پر آف اسکرین Canvas بناتا ہے اور ڈی کوڈ شدہ پکسلز دوبارہ کھینچنے کے لیے ctx.drawImage(source, 0, 0, width, height) کال کرتا ہے۔ براؤزر وہ interpolation سنبھالتا ہے جو اسکیل شدہ نتیجے کو ہموار کرتا ہے۔
4. canvas.toBlob کال کرتا ہے تاکہ ماخذ فارمیٹ میں دوبارہ انکوڈ ہو۔ PNG بے نقصان رہتا ہے، JPEG اور WebP اعلی کوالٹی سیٹنگ پر دوبارہ انکوڈ ہوتے ہیں۔ پھر صفحہ پہلے/بعد کارڈ دکھاتا ہے اور فی تصویر ڈاؤن لوڈ یا fflate سے میموری میں بنا ایک ZIP پیش کرتا ہے۔

تصاویر کا سائز کیوں تبدیل کریں؟

• بہت بڑی تصاویر صفحات سست ہونے کی سب سے عام وجہ ہیں۔ 4000×3000 کا فون فوٹو 600 پکسل چوڑی لے آؤٹ میں ڈالنے سے اسکرین کی ضرورت سے تقریباً چالیس گنا زیادہ پکسلز جاتے ہیں۔ اپلوڈ سے پہلے لمبی ترین سائیڈ 1600 px تک محدود کرنے سے صفحے کا وزن کافی کم ہوتا ہے اور Core Web Vitals LCP بہتر ہوتی ہے۔
• اپلوڈ فارمز کے سخت طول و عرض ہوتے ہیں۔ اوتار سلاٹس، شناختی تصویر پورٹلز، مارکیٹ پلیس لسٹنگز، اور OG سوشل کارڈز سب مخصوص پکسل سائز چاہتے ہیں: Open Graph پریویو کے لیے 1200×630، ایپ آئیکن کے لیے 512×512، تھمب نیل کے لیے 150×150۔ نمبر بالکل درست کریں اور مسترد اپلوڈ لوپ سے بچیں۔
• ای میل اور چیٹ ٹولز بڑی فائلیں خاموشی سے دوبارہ کمپریس کرتے ہیں جو صاف سکرین شاٹ خراب کر سکتا ہے۔ خود مناسب چوڑائی میں ری سائز کرنا نتیجہ قابلِ پیشگوئی رکھتا ہے کسی اور کی lossy پائپ لائن پر چھوڑنے کی بجائے۔
• گیلریوں اور کیٹلاگز کے لیے بیچ کنسسٹنسی ضروری ہے۔ مختلف سائز کی تصاویر کا فولڈر 800×800 کے ایک ہدف سے گزارنے سے ہر کارڈ گرڈ میں سیدھا لائن اپ ہو جاتا ہے، بغیر کسی بڑی آوارہ تصویر کے جو لے آؤٹ توڑے۔

عام استعمالات

ری سائزنگ اس وقت آتی ہے جب ماخذ طول و عرض اور منزل کی توقعات میل نہیں کھاتیں۔ تین نمونے بار بار سامنے آتے ہیں۔

• Shopify یا WooCommerce اسٹور کے لیے پروڈکٹ تصاویر تیار کرنا۔ 4000 پکسل کیمرہ اصل کا فولڈر 1600 px لمبی ترین سائیڈ تک محدود ہو جاتا ہے تاکہ اسٹور فرنٹ تیز لوڈ ہو، جبکہ آسپیکٹ ریشو بالکل محفوظ رہے۔
• ایک ماسٹر فائل سے سوشل اور ایپ اثاثے بنانا۔ Open Graph کارڈ کے لیے عین 1200×630 سیٹ کریں، پھر ایپ آئیکن کے لیے 512×512، ہر ایک کو چند کلکس میں بھاری ایڈیٹر کھولے بغیر ایکسپورٹ کریں۔
• ٹکٹ سے منسلک کرنے سے پہلے QA یا سپورٹ سکرین شاٹس کا بیچ سکڑنا۔ 50 شاٹ فولڈر کو 50% تک اسکیل کرنے سے عموماً بگ ٹریکر میں جانے سے پہلے آرکائیو سائز تین چوتھائی کم ہو جاتا ہے۔

ایک عملی مثال: 4000 px فوٹو کو 1600 px ویب امیج میں

فون سے سیدھا آیا 4000×3000 فوٹو ایک عام پے لوڈ ہے جو کسی بھی ویب لے آؤٹ کی ضرورت سے بہت زیادہ ہے۔ یہ ری سائزنگ کی بچت کا ایک منصفانہ بینچ مارک ہے۔

فوٹو اپلوڈ زون میں چھوڑیں، موڈ لمبی ترین سائیڈ محدود کریں پر رہنے دیں، اور ویلیو 1600 سیٹ کریں۔ Canvas پائپ لائن تصویر کو آسپیکٹ ریشو محفوظ رکھتے ہوئے 1600×1200 پر دوبارہ کھینچتی ہے، پھر اصل فارمیٹ میں دوبارہ انکوڈ کرتی ہے۔ آؤٹ پٹ کارڈ نئے طول و عرض اور فائل سائز دکھاتا ہے جو ایک عام JPEG کے لیے کئی میگابائٹس سے چند سو کلوبائٹس تک گر جاتا ہے۔ واحد فائل لینے کے لیے کارڈ پر ڈاؤن لوڈ کریں کلک کریں، یا ایک پاس میں کئی تصاویر ری سائز کی ہوں تو .zip ڈاؤن لوڈ کریں کلک کریں۔ پورا چکر، چھوڑنے سے ڈاؤن لوڈ تک، ایک سیکنڈ کے ایک حصے میں چلتا ہے اور خود صفحہ لوڈ ہونے کے بعد صفر بینڈوڈتھ استعمال کرتا ہے۔

کون سے ری سائز موڈز دستیاب ہیں؟

تین۔ لمبی ترین سائیڈ محدود کریں چوڑائی یا اونچائی میں سے لمبے کو پکسل ویلیو تک محدود کرتا ہے اور دوسرے کو میل کرنے کے لیے اسکیل کرتا ہے، جو محفوظ ڈیفالٹ ہے کیونکہ یہ کبھی خرابی نہیں دیتا۔ عین چوڑائی × اونچائی آپ کو دونوں نمبر ٹائپ کرنے دیتا ہے، آسپیکٹ ریشو لاک کے ساتھ جو پہلا ایڈٹ کرنے پر ماخذ نسبت سے دوسرا فیلڈ دوبارہ حسابی کرتا ہے — جب فارم بالکل غیر متناسب سائز مانگے تو لاک بند کریں۔ فیصد سے اسکیل کریں دونوں طول و عرض کو ایک فیکٹر سے ضرب دیتا ہے، ایک ہی وقت میں پوری بیچ آدھی یا دوگنی کرنے کے لیے مناسب۔ چھ ون کلک پری سیٹس (1920×1080 سے 150×150 تھمب نیل تک) سب سے عام اہداف کور کرتی ہیں۔

کیا یہ میرے آلے پر ہوتا ہے؟

جی ہاں، مکمل طور پر۔ صفحہ ہر تصویر کو میموری میں ڈی کوڈ، دوبارہ کھینچنے اور دوبارہ انکوڈ کرنے کے لیے براؤزر کی مقامی Canvas API اور Web File API استعمال کرتا ہے۔ کوئی تصویری ڈیٹا سرور کو نہیں بھیجا جاتا، کوئی عارضی اپلوڈ نہیں، کوئی کلاؤڈ راؤنڈ ٹرپ نہیں۔ آپ خود تصدیق کر سکتے ہیں: DevTools کھولیں، Network پینل پر جائیں، اور ری سائز چلائیں۔ آپ کو نظر آنے والی صرف آؤٹ باؤنڈ درخواستیں ابتدائی صفحہ لوڈ اور اشتہار کالز ہوں گی۔ ٹیب سے تصویر جیسی کوئی چیز نہیں نکلتی، جو اسے اسکین شدہ آئی ڈی، میڈیکل امیجز اور دیگر مواد کے لیے محفوظ بناتا ہے جو آپ کبھی اپلوڈ نہیں کرنا چاہتے۔

کیا ری سائزنگ کوالٹی کم کرے گی؟

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

کون سے فائل فارمیٹس سپورٹ ہیں؟

ان پٹ سائیڈ پر، براؤزر جو بھی فارمیٹ ڈی کوڈ کر سکے قبول ہے: PNG، JPEG، WebP، GIF، اور BMP تقریباً ہر وہ فائل کور کرتے ہیں جو فون، کیمرہ، یا سکرین شاٹ ٹول پیدا کرتا ہے۔ آؤٹ پٹ ماخذ فارمیٹ محفوظ رکھتا ہے جہاں Canvas انکوڈر سپورٹ کرے — PNG، JPEG، اور WebP براہ راست راؤنڈ ٹرپ ہوتے ہیں۔ GIF اور BMP جنہیں Canvas API ڈی کوڈ کر سکتی ہے مگر دوبارہ انکوڈ نہیں کر سکتی، بجائے اس کے بے نقصان PNG کے طور پر محفوظ کیے جاتے ہیں۔ ری سائز شدہ فائل نام میں نئے طول و عرض شامل ہوتے ہیں (مثلاً photo-1600x1200.jpg) تاکہ بیچ ترتیب دینا آسان رہے۔

اپنی تصاویر چھوڑیں، سائز چنیں، ری سائز کریں۔ سب کچھ آپ کے ٹیب میں چلتا ہے۔ کوئی اپلوڈ نہیں، کوئی اکاؤنٹ نہیں، سرور قطار کا انتظار نہیں۔