ছবি ↔ Base64

ছবি থেকে Base64 রূপান্তর কী?#

ডেটা URL হলো এমন একটি স্ট্রিং যা একটি সম্পূর্ণ ফাইল ইনলাইন ধারণ করে, তার সামনে MIME ধরনটি উপসর্গ হিসেবে যুক্ত থাকে: data:image/png;base64,iVBORw0KGgo…। একবার কোনো ছবি এই ধরনের স্ট্রিংয়ের ভেতরে ঢুকে গেলে এটি টেক্সটের মতো আচরণ করে — আপনি এটিকে HTML, CSS, JSON, Markdown ফাইল বা সোর্স ফাইলে পেস্ট করতে পারেন, এবং গ্রহণকারী প্রান্তটি কোনো আলাদা ফাইল আনা ছাড়াই এটি রেন্ডার করে। এই পৃষ্ঠাটি একটি ছবি ফাইলকে ডেটা URL-এ রূপান্তর করে এবং ডেটা URL-কে আবার দেখার যোগ্য ছবিতে ফিরিয়ে আনে, সম্পূর্ণ আপনার ব্রাউজারে।

Base64 বাইনারি ডেটাকে প্রায় ৩৩% ফুলিয়ে দেয় (প্রতি তিনটি বাইট চারটি ASCII অক্ষরে পরিণত হয়), তাই একটি ডেটা URL যে ফাইলটি প্রতিস্থাপন করে তার চেয়ে বড় হয়। আপনি যখন শূন্য বাহ্যিক অনুরোধ চান তখন এই আপসটি গ্রহণযোগ্য: HTML ইমেল স্বাক্ষর, একক-ফাইল ডেমো, <head>-এ ইনলাইন করা favicon, JSON কনফিগে বান্ডল করা আইকন, অথবা এমন পরিবেশ যেখানে ডিস্ক থেকে <img src> লোড করা সম্ভব নয় (কিছু CSP-লক করা পৃষ্ঠা, স্যান্ডবক্সড প্রিভিউ)।

এই টুলটি RFC 2397 অনুযায়ী ডেটা URL পার্স করে, base64 এবং URL-এনকোডেড টেক্সট পেলোড উভয়ই গ্রহণ করে, MIME শনাক্ত করে, এবং প্রিভিউ করার আগে যাচাই করে যে এটি আসলেই ছবি কিনা — তাই একটি ভাঙা স্ট্রিং পেস্ট করলে নীরবে একটি ভাঙা-ছবি আইকন দেখানোর বদলে স্পষ্টভাবে ব্যর্থ হয়।

যেভাবে ব্যবহার করবেন#

1. একটি ছবি ড্যাশ দেওয়া জোনে ফেলুন, অথবা আপলোড ক্লিক করে একটি ফাইল বেছে নিন। PNG, JPEG, WebP, GIF, SVG, BMP, AVIF এবং ICO — সবগুলোই গ্রহণযোগ্য।
2. বাঁদিকের Base64 ডেটা URL টেক্সট এরিয়াটি সম্পূর্ণ data:image/…;base64,… স্ট্রিং দিয়ে পূর্ণ হয়। ডানদিকের কপি ব্যবহার করে এটি নিন।
3. উল্টো দিকে যেতে, সেই একই টেক্সট এরিয়ায় একটি ডেটা URL পেস্ট করুন। ডানদিকের প্রিভিউটি ছবিটি আবার রেন্ডার করে, এবং ডাউনলোড এটিকে সঠিক এক্সটেনশন সহ একটি আসল ফাইল হিসেবে সংরক্ষণ করে।
4. মুছুন উভয় প্যান খালি করে দেয়।

MIME-টি ডেটা URL হেডার থেকে পড়া হয়, ফাইল এক্সটেনশন থেকে অনুমান করা হয় না — তাই একটি .png-কে .jpg তে নাম পরিবর্তন করলে টুলটি বোকা বানাতে পারবে না, এবং ডাউনলোড এক্সটেনশন সর্বদা প্রকৃত ধরনের সাথে মিলে যাবে।

প্রধান বৈশিষ্ট্য#

• উভযমুখী রূপান্তর। এম্বেড করার জন্য ছবি → ডেটা URL; এক্সট্র্যাক্ট করার জন্য ডেটা URL → ফাইল। একই প্যান উভয় দিক সামলায়।
• MIME-সচেতন। প্রস্তাবিত ডাউনলোড এক্সটেনশন প্রকৃত মিডিয়া ধরন থেকে উদ্ভূত হয় (image/svg+xml → .svg, image/jpeg → .jpg), ফাইলের নাম থেকে নয়।
• প্রিভিউর আগে যাচাই। ত্রুটিপূর্ণ স্ট্রিংগুলো অবৈধ হিসেবে চিহ্নিত হয়, নীরবে একটি ভাঙা ছবি দেখানোর বদলে।
• যেকোনো বাইট নিরাপদে সামলায়। Base64 এনকোডিং খণ্ডায়িত করা হয় যাতে মাল্টিবাইট ও বাইনারি পেলোড দূষণ ছাড়াই রাউন্ড-ট্রিপ করে।
• স্থানীয় থাকে। FileReader এবং atob/btoa API কাজটি পৃষ্ঠার ভেতরেই করে; কিছুই আপলোড হয় না।

বিস্তারিত উদাহরণ#

আপনার কাছে pixel.gif আছে, একটি ১×১ স্বচ্ছ ট্র্যাকিং পিক্সেল (ইমেল ক্লায়েন্টরা যা ওপেন বিকন হিসেবে ব্যবহার করে), ৪৩ বাইট। এটি আপলোড করুন। ডেটা URL টেক্সট এরিয়াটি সম্পূর্ণ, নির্ভুল স্ট্রিং তৈরি করে:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

এটি একটি আসল, সম্পূর্ণ ডেটা URL — এটিকে HTML-এ একটি <img src="…">-এ, CSS background-image: url('…')-এ, বা একটি JSON ফিল্ডে পেস্ট করুন এবং গ্রহণকারী প্রান্ত শূন্য ফাইল আনার সাথে মূল পিক্সেলটি রেন্ডার করবে। MIME (image/gif) এবং .gif ডাউনলোড এক্সটেনশন উভয়ই ডেটা URL হেডার থেকে আসে, মূল ফাইলের নাম থেকে নয়।

একটি বড় ছবির ক্ষেত্রে নীতিটি অভিন্ন — শুধু base64 বডি বড় হয় (বাইট আকারের প্রায় ১.৩৩ গুণ) এবং MIME হয়ে যায় image/jpeg বা image/webp।

সাধারণ জিজ্ঞাসা#

আমার ডেটা URL মূল ফাইলের চেয়ে এত বড় কেন?#

Base64 প্রতি তিনটি বাইটকে চারটি অক্ষর হিসেবে উপস্থাপন করে, তাই স্ট্রিংটি বাইনারি আকারের প্রায় ১.৩৩ গুণ। বড় ছবির ক্ষেত্রে এটি অপচয় — প্রথমে সংকোচন টুলটি বিবেচনা করুন, অথবা ফাইলটি হোস্ট করে ইনলাইন করার বদলে লিঙ্ক করুন।

কোনো আকারের সীমা আছে কি?#

ব্রাউজার শত শত মেগাবাইট পর্যন্ত ডেটা URL সামলায়, কিন্তু বাস্তবে কয়েকশো KiB-এর বেশি কিছু আপনার HTML, CSS এবং JSON-কে ফুলিয়ে দেয় এবং পার্সারকে ধীর করে। শুধু ছোট আইকন, লোগো এবং স্প্রাইট ইনলাইন করুন।

আমি কি SVG রূপান্তর করতে পারি?#

হ্যাঁ। SVG-এর MIME image/svg+xml এবং এটি আগে থেকেই টেক্সট, তাই ডেটা URL কম্প্যাক্ট এবং লসলেস রাউন্ড-ট্রিপ করে।

আমি যে ডেটা URL পেস্ট করেছি সেটি “অবৈধ” বলছে। কী হয়েছিল?#

স্ট্রিংটি অবশ্যই data: দিয়ে শুরু হতে হবে এবং হেডারকে পেলোড থেকে আলাদা করতে একটি কমা থাকতে হবে। একটি অসম্পূর্ণ কপি, একটি অতিরিক্ত শূন্যস্থান সামনে, বা একটি অনুপস্থিত ;base64 ফ্ল্যাগ — সবই পার্সিং ব্যর্থ করবে। হেডারসহ সম্পূর্ণ স্ট্রিংটি পুনরায় কপি করুন।