تصویر سے Base64 تبدیلی کیسے کام کرتی ہے
پوری تبدیلی آپ کے براؤزر میں File API اور بلٹ اِن btoa فنکشن کا استعمال کرتے ہوئے چلتی ہے — کوئی کوڈیک لائبریری ڈاؤن لوڈ نہیں ہوتی اور کوئی سرور تصویر نہیں دیکھتا۔ یہ ہے پائپ لائن، شروع سے آخر تک:
- آپ تصویر چھوڑتے یا منتخب کرتے ہیں۔ براؤزر اسے آپ کی مقامی ڈسک سے Blob کے طور پر پڑھتا ہے، بائٹس کبھی سرور پر کاپی نہیں ہوتیں۔
- فائل 1 MB ٹکڑوں میں پڑھی جاتی ہے اور ہر ٹکڑے کی بائٹس ثنائی تار میں شامل ہوتی ہیں۔ یہ تقسیم بڑی تصاویر کو JavaScript کال اسٹیک سے باہر آنے سے روکتی ہے۔
- ثنائی تار btoa کو دی جاتی ہے جو ہر تین بائٹس کو A–Z، a–z، 0–9، +، / حروف تہجی سے چار Base64 حروف پر نقشہ بناتی ہے۔
- فائل کی MIME قسم (image/png، image/jpeg، وغیرہ) File آبجیکٹ سے پڑھی جاتی ہے اور data: سابقہ کے طور پر لگائی جاتی ہے، جو مکمل data:image/…;base64,… URI تیار کرتی ہے۔
- صفحہ اس URI سے چار مخرجات بناتا ہے — مکمل data URI، بغیر سابقہ خام Base64، چسپاں کے لیے تیار
ٹیگ، اور CSS background-image مقتطع — ہر ایک اپنے کاپی بٹن کے ساتھ۔
تصویر کو data URI کے طور پر کیوں انکوڈ کریں؟
- ایک چھوٹے لوگو یا آئیکن کو data URI کے طور پر انلائن کرنا ایک علیحدہ نیٹ ورک رائونڈ ٹرپ ہٹاتا ہے، اس لیے صفحہ یا ای میل اپنا پہلا فریم تھوڑا پہلے رینڈر کرتا ہے۔
- ایک صفحہ یا اسٹائل شیٹ جس کی تصاویر انلائن ہیں وہ آف لائن کام کرتی ہے، اور آپ اسے اثاثوں کا فولڈر گھسیٹے بغیر کاپی کر سکتے ہیں۔
- بہت سے میل کلائنٹ بطور ڈیفالٹ منسلک دور دراز تصاویر کو بلاک کرتے ہیں۔ لوگو کو Base64 کے طور پر انلائن کریں اور یہ پیغام کھلتے ہی ظاہر ہو جاتا ہے، کوئی دور دراز فیچ نہیں۔
- انکوڈنگ مکمل طور پر آپ کے براؤزر میں ہوتی ہے، اس لیے حساس تصاویر کبھی تھرڈ پارٹی سرور پر نہیں جاتیں۔ یہ اسکرین شاٹس، شناختی اسکینز اور اندرونی خاکوں پر لاگو ہوتا ہے۔
Base64 تصاویر کے عام استعمال
data URIs وہاں نظر آتی ہیں جہاں تصویر اتنی چھوٹی ہو کہ ایک علیحدہ درخواست Base64 کے شامل ~33% سائز اضافے سے زیادہ مہنگی پڑے۔ تین نمونے بار بار سامنے آتے ہیں:
- انلائن CSS آئیکنز: ایک 1–2 KB sprite یا آئیکن اسٹائل شیٹ میں background-image: url(data:…) کے طور پر ڈالی جاتی ہے تاکہ قاعدہ مکمل طور پر خود کفیل ہو۔
- ای میل دستخط اور نیوز لیٹرز: data URI src کے ساتھ
کے طور پر سرایت کیا گیا لوگو اس وقت بھی ظاہر ہوتا ہے جب کلائنٹ دور دراز تصاویر کو بلاک کرے۔
- بلڈ ٹول انلائننگ: Webpack اور Vite جیسے بنڈلرز خود بخود ایک بائٹ حد سے نیچے کے اثاثوں کو انلائن کرتے ہیں، اور یہ ٹول آپ کو بالکل وہی دیکھنے دیتا ہے جو وہ مخرج نظر آتا ہے۔
Base64 تصویر کیسی نظر آتی ہے؟
ایک چھوٹی 1×1 شفاف PNG لیں۔ اس کی خام بائٹس صرف 67 بائٹس ہیں، لیکن انکوڈ ہونے پر یہ تار iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= بن جاتی ہے، اور مکمل data URI data:image/png;base64,iVBORw0KGgo… ہے۔ دیکھیں کہ انکوڈ شدہ شکل اصل سے تقریباً ایک تہائی بڑی ہے۔ یہ بائنری ڈیٹا کو متن میں براہِ راست سرایت کے لیے محفوظ بنانے کا قابل قدر ہے۔
کیا میری تصویر کہیں اپلوڈ ہوتی ہے؟
نہیں۔ تبدیلی براؤزر کے File API اور مقامی btoa فنکشن کا استعمال کرتے ہوئے تصویر کو مکمل طور پر آپ کے آلے پر انکوڈ کرتی ہے۔ آپ خود تصدیق کر سکتے ہیں: اپنے براؤزر کے ڈیولپر ٹولز کھولیں، Network پینل میں جائیں، اور ایک تصویر تبدیل کریں — آپ کو صرف صفحے کا لوڈ اور کسی بھی اشتہار کی درخواستیں نظر آئیں گی۔ تصویر کی طرح کچھ بھی سرور کو نہیں بھیجا جاتا، جو اسے اسکرین شاٹس، شناختی دستاویزات اور اندرونی خاکوں کے لیے محفوظ بناتا ہے۔
Base64 مخرج میری اصل تصویر سے بڑا کیوں ہے؟
Base64 بائنری ڈیٹا کے ہر تین بائٹس کو چار ASCII حروف سے ظاہر کرتا ہے، اس لیے انکوڈ شدہ متن ماخذ فائل سے تقریباً 33% بڑا ہوتا ہے۔ اس صفحے پر data URI سائز ریڈ آوٹ پھولا ہوا درست حجم ظاہر کرتا ہے۔ یہی وجہ ہے کہ data URIs صرف چھوٹی تصاویر کے لیے موزوں ہیں — 2 MB فوٹو کو انلائن کرنا آپ کے HTML یا CSS کو ایک علیحدہ درخواست سے کہیں زیادہ پھلا دے گا۔ اصول کے طور پر، تقریباً 4 KB سے کم تصاویر انلائن کریں اور بڑی کے لیے لنک کریں۔
میں کون سی تصویر فارمیٹس تبدیل کر سکتا ہوں؟
کوئی بھی فارمیٹ جسے آپ کا براؤزر تصویر کے طور پر پہچانتا ہو کام کرتا ہے، کیونکہ ٹول تصویر کو ڈی کوڈ کرنے کے بجائے خام بائٹس پڑھتا ہے۔ اس میں PNG، JPEG، GIF، WebP، SVG، اور BMP شامل ہیں۔ MIME قسم براہِ راست فائل سے پڑھی جاتی ہے، اس لیے data: سابقہ ہمیشہ اصل فارمیٹ سے مطابقت رکھتا ہے — JPEG سے data:image/jpeg اور SVG سے data:image/svg+xml ملتا ہے۔ SVG ایک خاص نوٹ کا مستحق ہے: یہ پہلے سے متن ہے، اس لیے SVGs کے لیے URL-انکوڈ شدہ data URI اکثر Base64 ورژن سے چھوٹا ہوتا ہے، حالانکہ یہ ٹول مستقل مزاجی کے لیے Base64 شکل جاری کرتا ہے۔
ایک تصویر چھوڑیں، data URI یا جو مقتطع چاہیں کاپی کریں، اور اسے اپنے HTML، CSS، یا ای میل ٹیمپلیٹ میں چسپاں کریں۔ ہر بائٹ آپ کے آلے پر رہتی ہے۔ کوئی اپلوڈ نہیں، کوئی اکاؤنٹ نہیں، کوئی سرور رائونڈ ٹرپ نہیں۔