براؤزر پر مبنی تصویر کنورژن کیسے کام کرتا ہے
ہر تبدیلی ایک چار مرحلہ پائپ لائن ہے جو مکمل طور پر JavaScript میں چلتی ہے۔ کوئی کوڈیک لائبریری ڈاؤن لوڈ نہیں ہوتی — براؤزر کی اپنی Canvas API ڈی کوڈنگ اور ری انکوڈنگ سنبھالتی ہے۔
- ہر اپلوڈ شدہ فائل کو Blob کے طور پر پڑھتا ہے اور آبجیکٹ URL بناتا ہے تاکہ براؤزر بائٹس سرور پر کاپی کیے بغیر ڈی کوڈ کر سکے۔
- ڈی کوڈ شدہ تصویر کو آف اسکرین Canvas عنصر پر کھینچتا ہے، اصل آسپیکٹ ریشو برقرار رکھتے ہوئے سائز تبدیل کرنے کی پابندی لاگو کرتا ہے۔
- پکسلز کو ری انکوڈ کرنے کے لیے
canvas.toBlob(callback, targetMime, quality)کال کرتا ہے۔ PNG آؤٹ پٹ ہمیشہ بے نقصان ہوتا ہے؛ JPEG اور WebP کوالٹی سلائیڈر پر عمل کرتے ہیں۔ - آؤٹ پٹ طول و عرض اور فائل سائز کے ساتھ پہلے/بعد کا تھمب نیل دکھاتا ہے، پھر فی تصویر ڈاؤن لوڈ بٹن یا پوری بیچ کے لیے ایک ZIP فراہم کرتا ہے۔
تصویر فارمیٹ کیوں تبدیل کریں؟
- PNG سے WebP پر سوئچ کرنے سے 0.8 کوالٹی پر کوئی نظر آنے والے نقصان کے بغیر عام فائل سائز 25–35% کم ہو جاتے ہیں، جو براہ راست صفحے کا وزن کم کرتا ہے اور Core Web Vitals LCP اسکورز بہتر کرتا ہے۔
- PNG وہ شفافیت برقرار رکھتا ہے جسے JPEG ختم کر دیتا ہے، اس لیے PNG→JPEG شفاف پکسلز کو سفید پس منظر پر رینڈر کرتا ہے — مفید جب منزل (ای میل، پرانا CMS) PNG قبول نہیں کرتا۔
- سوشل پلیٹ فارمز اور اشتہاری نیٹ ورکس کے سخت فارمیٹ تقاضے ہیں: Facebook اور LinkedIn تصاویر کے لیے JPEG ترجیح دیتے ہیں؛ Twitter کا OG پریویو پائپ لائن WebP سنبھالتا ہے؛ کچھ اشتہاری سرورز غیر JPEG تخلیقات مسترد کرتے ہیں۔
- CMS یا DAM پر اپلوڈ کرنے سے پہلے مختلف فارمیٹس کی تصاویر (PNG اسکرین شاٹس، JPEG تصاویر، WebP ایکسپورٹس) کے بیچ کو ایک ہی فارمیٹ میں معیاری بنانا انجیسٹ پائپ لائن میں فارمیٹ ہینڈلنگ کی پیچیدگی ختم کرتا ہے۔
عام استعمالات
فارمیٹ کنورژن اس وقت ضروری ہو جاتا ہے جب ماخذ فارمیٹ اور منزل کی توقعات مطابقت نہیں رکھتیں۔
- Shopify یا WooCommerce اسٹور کے لیے پروڈکٹ تصاویر تیار کرنا — JPEG اصل کو اسٹور فرنٹ کے لیے 0.85 کوالٹی پر WebP میں تبدیل کرنا، پرنٹ ریڈی ایکسپورٹس کے لیے PNG رکھنا۔
- React یا Next.js بلڈ میں شامل کرنے سے پہلے ڈیزائنر کے PNG ایکسپورٹس کو JPEG یا WebP میں تبدیل کرنا تاکہ فریم ورک کا امیج آپٹیمائزر چھوٹے ماخذ سے شروع ہو۔
- QA ران کے اسکرین شاٹس کے فولڈر کی بیچ پروسیسنگ — بگ ٹریکر ٹکٹ میں منسلک کرنے سے پہلے آرکائیو سائز کم کرنے کے لیے PNG سے 0.9 کوالٹی پر JPEG۔
ایک عملی مثال: 2 MB PNG → 300 KB WebP
2400×1600 پکسلز پر 2 MB PNG ہیرو تصویر مارکیٹنگ لینڈنگ پیجز پر عام پے لوڈ ہے۔
PNG یہاں چھوڑیں، ہدف فارمیٹ کے طور پر WebP منتخب کریں، کوالٹی 0.8 پر سیٹ کریں، اور اختیاری طور پر پکسل طول و عرض کو آدھا کرنے کے لیے زیادہ سے زیادہ چوڑائی 1200 پر سیٹ کریں۔ Canvas پائپ لائن تصویر کو 1200×800 (آسپیکٹ محفوظ) پر کھینچتا ہے، WebP میں ری انکوڈ کرتا ہے، اور آؤٹ پٹ کارڈ نتیجہ دکھاتا ہے — عموماً 280–320 KB، 85% کی کمی۔ کارڈ پر ڈاؤن لوڈ کلک کریں یا اگر آپ نے کئی تصاویر تبدیل کی ہیں تو ZIP ڈاؤن لوڈ کریں۔
کون سے فارمیٹس سپورٹ ہیں؟
ماخذ تصاویر: کوئی بھی فارمیٹ جو براؤزر ڈی کوڈ کر سکے — PNG، JPEG، WebP، GIF اور BMP سب قبول ہیں۔ آؤٹ پٹ فارمیٹس: PNG (بے نقصان)، JPEG اور WebP۔ AVIF آؤٹ پٹ ابھی سپورٹ نہیں کیونکہ Canvas API انکوڈر صرف Chrome 105+ میں دستیاب ہے اور Safari اور Firefox میں غیر موجود ہے؛ مستقبل کی ریلیز کے لیے WASM پر مبنی AVIF راستہ منصوبہ بند ہے۔
کیا یہ میرے آلے پر ہوتا ہے؟
جی ہاں۔ صفحہ براؤزر کی مقامی Canvas API اور Web File API استعمال کرتا ہے۔ کوئی بھی تصویری ڈیٹا سرور کو نہیں بھیجا جاتا؛ کنورژن پائپ لائن مکمل طور پر آپ کے براؤزر ٹیب میں چلتی ہے۔ آپ DevTools کھول کر اور Network پینل چیک کر کے اسے تصدیق کر سکتے ہیں — صفحہ لوڈ ہونے کے بعد کوئی آؤٹ باؤنڈ درخواست نہیں ہوتی۔
PNG اور JPEG میں کوالٹی کا فرق کیا ہے؟
PNG بے نقصان فارمیٹ ہے — ہر پکسل انکوڈنگ سائیکل میں بالکل محفوظ رہتا ہے۔ JPEG DCT کمپریشن استعمال کرتا ہے اور باریک تفصیلات چھوڑتا ہے جن پر آنکھ شاذ و نادر ہی دھیان دیتی ہے؛ کوالٹی 0.8 ایک عام میٹھا نقطہ ہے جہاں اصل سے بصری فرق زیادہ تر ناظرین کو محسوس نہیں ہوتا لیکن فائل PNG سے 4–6 گنا چھوٹی ہوتی ہے۔ WebP بے نقصان اور نقصان دہ دونوں طریقوں میں کام کر سکتا ہے؛ یہاں کوالٹی سلائیڈر نقصان دہ انکوڈر چلاتا ہے، اور کوالٹی 0.85 قدرتی تصاویر میں JPEG 0.85 سے عام طور پر 25–30% بہتر ہوتا ہے۔
AVIF سپورٹ کب آئے گا؟
canvas.toBlob(…, 'image/avif') کے ذریعے AVIF انکوڈنگ آج صرف Chrome 105+ میں کام کرتی ہے؛ Safari اور Firefox اسے سپورٹ نہیں کرتے۔ ایک مستقبل کی ریلیز ایک ہلکے WebAssembly انکوڈر استعمال کرتے ہوئے اختیاری AVIF راستہ شامل کرے گی تاکہ یہ خصوصیت تمام براؤزرز میں کام کرے۔ اس وقت تک، AVIF آپشن "جلد آ رہا ہے" کے طور پر دکھایا جاتا ہے اور WebP انکوڈر (جدید براؤزرز میں عالمی طور پر سپورٹ شدہ) تجویز کردہ اگلی نسل کا متبادل ہے۔
اپنی تصاویر چھوڑیں، ایک فارمیٹ منتخب کریں، تبدیل کریں۔ سب کچھ آپ کے ٹیب میں چلتا ہے — کوئی اپلوڈ نہیں، کوئی اکاؤنٹ نہیں، سرور کا انتظار نہیں۔