ইমেজ-থেকে-Base64 রূপান্তর কীভাবে কাজ করে
পুরো রূপান্তর আপনার ব্রাউজারে File API এবং বিল্ট-ইন btoa ফাংশন ব্যবহার করে চলে — কোনো কোডেক লাইব্রেরি ডাউনলোড হয় না এবং কোনো সার্ভার ছবি দেখে না। শুরু থেকে শেষ পর্যন্ত পাইপলাইন এখানে:
- আপনি ছবি ড্রপ বা বেছে নেন। ব্রাউজার এটি আপনার স্থানীয় ডিস্ক থেকে Blob হিসেবে পড়ে, বাইটগুলো কখনও সার্ভারে কপি হয় না।
- ফাইলটি ১ MB অংশে পড়া হয় এবং প্রতিটি অংশের বাইটগুলো একটি বাইনারি স্ট্রিংয়ে যোগ করা হয়। অংশে ভাগ করা বড় ছবিকে JavaScript কল স্ট্যাক ওভারফ্লো থেকে রক্ষা করে।
- বাইনারি স্ট্রিংটি btoa-কে দেওয়া হয়, যা A–Z, a–z, 0–9, +, / বর্ণমালা থেকে প্রতি তিনটি বাইটকে চারটি Base64 অক্ষরে মানচিত্র করে।
- ফাইলের MIME ধরন (image/png, image/jpeg ইত্যাদি) File অবজেক্ট থেকে পড়া হয় এবং data: prefix হিসেবে যোগ করা হয়, যা সম্পূর্ণ data:image/…;base64,… URI তৈরি করে।
- পেজটি সেই URI থেকে চারটি আউটপুট তৈরি করে — পূর্ণ data URI, কোনো prefix ছাড়া Raw Base64, ready-to-paste
ট্যাগ এবং CSS background-image snippet — প্রতিটির নিজস্ব কপি বোতাম।
কেন ছবি data URI হিসেবে এনকোড করবেন?
- একটি ছোট লোগো বা আইকন data URI হিসেবে ইনলাইন করলে একটি আলাদা নেটওয়ার্ক রাউন্ড-ট্রিপ বাদ যায়, ফলে পেজ বা ইমেইল একটু আগে প্রথম ফ্রেম রেন্ডার করে।
- ইনলাইন ছবি সহ একটি পেজ বা স্টাইলশীট স্বয়ংসম্পূর্ণ। এটি অফলাইনে কাজ করে এবং assets ফোল্ডার ছাড়াই যেকোনো জায়গায় কপি করা যায়।
- বেশিরভাগ মেইল ক্লায়েন্ট ডিফল্টরূপে লিংকযুক্ত রিমোট ছবি ব্লক করে। Base64-এ লোগো ইনলাইন করুন এবং এটি বার্তা খোলার সাথে সাথে দেখা যায়, কোনো রিমোট ফেচ ছাড়াই।
- এনকোডিং সম্পূর্ণরূপে আপনার ব্রাউজারে হয়, তাই সংবেদনশীল ছবি কখনই তৃতীয় পক্ষের সার্ভারে যায় না। স্ক্রিনশট, ID স্ক্যান এবং অভ্যন্তরীণ ডায়াগ্রামের জন্য এটি উপযুক্ত।
Base64 ছবির সাধারণ ব্যবহার
Data URI সেখানে দেখা যায় যেখানে ছবি এত ছোট যে আলাদা অনুরোধের খরচ Base64-এর ~৩৩% আকার বৃদ্ধির চেয়ে বেশি। তিনটি প্যাটার্ন বারবার আসে:
- ইনলাইন CSS আইকন: ১–২ KB স্প্রাইট বা আইকন যা stylesheet-এ background-image: url(data:…) হিসেবে ঢোকানো হয় যাতে নিয়মটি সম্পূর্ণ স্বয়ংসম্পূর্ণ থাকে।
- ইমেইল সিগনেচার ও নিউজলেটার: data URI src সহ
হিসেবে এনকোড করা লোগো তখনও রেন্ডার হয় যখন ক্লায়েন্ট রিমোট ছবি ব্লক করে।
- বিল্ড-টুল ইনলাইনিং: Webpack ও Vite-এর মতো বান্ডলার বাইট threshold-এর নিচের assets স্বয়ংক্রিয়ভাবে ইনলাইন করে, এবং এই টুল আপনাকে সেই আউটপুট ঠিক কেমন দেখাবে তা পূর্বদর্শন করতে দেয়।
Base64 ছবি কেমন দেখায়?
একটি ছোট ১×১ স্বচ্ছ PNG নিন। এর raw bytes মাত্র ৬৭ bytes, কিন্তু এনকোড করলে এটি iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= স্ট্রিং হয়ে যায়, এবং পূর্ণ data URI হলো data:image/png;base64,iVBORw0KGgo…। লক্ষ্য করুন এনকোড রূপটি মূলের চেয়ে প্রায় এক-তৃতীয়াংশ বড়। টেক্সটে বাইনারি ডেটা সরাসরি এনকোড করার এটাই বিনিময়-মূল্য।
আমার ছবি কি কোথাও আপলোড হয়?
না। রূপান্তর ব্রাউজারের File API এবং নেটিভ btoa ফাংশন ব্যবহার করে ছবিটি সম্পূর্ণরূপে আপনার ডিভাইসে এনকোড করে। আপনি নিজে নিশ্চিত করতে পারেন: ব্রাউজারের developer tools খুলুন, Network প্যানেলে যান এবং একটি ছবি রূপান্তর করুন — শুধুমাত্র পেজ লোড ও বিজ্ঞাপন অনুরোধ দেখবেন। ছবির মতো কিছুই সার্ভারে যায় না, যা এটিকে স্ক্রিনশট, ID ডকুমেন্ট এবং অভ্যন্তরীণ ডায়াগ্রামের জন্য নিরাপদ করে।
Base64 আউটপুট কেন আমার মূল ছবির চেয়ে বড়?
Base64 বাইনারি ডেটার প্রতি তিনটি বাইটকে চারটি ASCII অক্ষর দিয়ে উপস্থাপন করে, তাই এনকোড টেক্সট উৎস ফাইলের চেয়ে প্রায় ৩৩% বড় হয়। এই পেজের data URI আকার রিডআউট সঠিক স্ফীত দৈর্ঘ্য দেখায়। তাই data URI কেবল ছোট ছবির জন্য উপযুক্ত — একটি ২ MB ফটো ইনলাইন করলে আপনার HTML বা CSS একটি আলাদা অনুরোধের চেয়ে অনেক বেশি ফুলে উঠবে। সাধারণ নিয়ম: প্রায় ৪ KB-এর নিচে ছবি ইনলাইন করুন এবং বড়গুলো লিংক করুন।
কোন ইমেজ ফরম্যাট রূপান্তর করা যায়?
আপনার ব্রাউজার যেকোনো ফরম্যাটকে ছবি হিসেবে চেনে তা কাজ করে, কারণ টুলটি ছবি ডিকোড না করে raw bytes পড়ে। এতে PNG, JPEG, GIF, WebP, SVG এবং BMP অন্তর্ভুক্ত। MIME ধরন সরাসরি ফাইল থেকে পড়া হয়, তাই data: prefix সর্বদা আসল ফরম্যাটের সাথে মিলে — JPEG থেকে data:image/jpeg এবং SVG থেকে data:image/svg+xml তৈরি হয়। SVG সম্পর্কে একটি বিশেষ নোট: এটি ইতিমধ্যেই টেক্সট, তাই SVG-এর জন্য URL-encoded data URI প্রায়ই Base64 সংস্করণের চেয়ে ছোট হয়, যদিও এই টুল সামঞ্জস্যের জন্য Base64 রূপ দেয়।
ছবি ড্রপ করুন, data URI বা প্রয়োজনীয় snippet কপি করুন, এবং HTML, CSS বা ইমেইল টেমপ্লেটে পেস্ট করুন। প্রতিটি বাইট আপনার ডিভাইসে থাকে। কোনো আপলোড নেই, কোনো অ্যাকাউন্ট নেই, কোনো সার্ভার রাউন্ড-ট্রিপ নেই।