ছবি থেকে Base64

নতুন

ছবিকে Base64 ডেটা URI-তে এনকোড করুন এবং আবার ছবিতে ডিকোড করুন।

Drop an image, click to browse, or paste PNG · JPG · SVG · WebP · GIF — encoded on your device, never uploaded.

Runs entirely in your browser. Nothing is uploaded.

অনলাইনে ইমেজকে Base64-এ রূপান্তর করুন

এই ফ্রি ইমেজ থেকে Base64 কনভার্টার আপনার ব্রাউজারেই যেকোনো ইমেজকে একটি Base64 স্ট্রিং বা data URI-তে রূপান্তরিত করে — কোনো আপলোড নেই, কোনো সাইনআপ নেই, ইনস্টল করার মতো কোনো সফটওয়্যার নেই। একটি ফাইল ড্রপ করুন, ব্রাউজ করতে ক্লিক করুন, আপনার ক্লিপবোর্ড থেকে পেস্ট করুন, বা একটি URL থেকে ইমেজ লোড করুন, এবং সাথে সাথেই একটি কপি-করার-উপযোগী data:image/…;base64,… স্ট্রিং এবং মিলে যাওয়া CSS, HTML এবং Markdown স্নিপেট পাবেন।

এটি উভয় দিকেই কাজ করে: একটি ইমেজ Base64-এ এনকোড করুন, বা ট্যাব পাল্টে একটি Base64 স্ট্রিংকে আবার দেখার-উপযোগী, ডাউনলোডযোগ্য ইমেজে ডিকোড করুন। যেহেতু পুরো টুলটি ব্রাউজারের FileReader এবং Canvas API ব্যবহার করে ক্লায়েন্ট-সাইডে চলে, আপনার ইমেজ কখনও আপনার ডিভাইস ছেড়ে যায় না — যা প্রাইভেট লোগো, স্ক্রিনশট এবং অপ্রকাশিত আর্টওয়ার্কের জন্য এটিকে নিরাপদ করে তোলে। এটি base64.guru এবং base64encoder.io-এর মতো জনপ্রিয় বিকল্পের বিপরীত, যারা প্রসেসিংয়ের জন্য আপনার ইমেজ রিমোট সার্ভারে আপলোড করে।

কীভাবে একটি ইমেজকে Base64-এ রূপান্তর করবেন

১. আপলোড বক্সে আপনার ইমেজ টেনে আনুন এবং ছাড়ুন, একটি ফাইল বেছে নিতে ক্লিক করুন, একটি ইমেজ পেস্ট করুন, বা একটি ইমেজ URL লিখুন। ২. টুলটি স্থানীয়ভাবে ফাইলটি পড়ে এবং সাথে সাথে Base64 data URI তৈরি করে, মূল আকার, এনকোড করা আকার এবং ইমেজের মাত্রা দেখিয়ে। ৩. আপনার প্রয়োজনীয় ফরম্যাটে আউটপুট কপি করুন — কাঁচা Base64, একটি সম্পূর্ণ data URI, একটি CSS background-image রুল, একটি HTML <img> ট্যাগ, বা Markdown — অথবা এটি একটি .txt ফাইল হিসেবে ডাউনলোড করুন।

উল্টো দিকে যেতে, Base64 → Image ট্যাব খুলুন, একটি data URI বা raw Base64 স্ট্রিং পেস্ট করুন, এবং টুলটি এটি ডিকোড করে, ইমেজটি প্রিভিউ করে, এবং সঠিক ফাইল এক্সটেনশনসহ এক-ক্লিক ডাউনলোডের সুবিধা দেয়। পুরো রাউন্ড-ট্রিপ — এনকোড তারপর ডিকোড — যাচাই করে যে আপনার Base64 আউটপুট বৈধ এবং সম্পূর্ণ।

HTML, CSS, Markdown এবং ইমেইলে Base64 ইমেজ এমবেড করুন

একটি Base64 data URI আপনাকে একটি আলাদা ফাইল লিংক করার পরিবর্তে সরাসরি টেক্সট হিসেবে আপনার কোডের ভেতরে একটি ইমেজ এমবেড করার সুযোগ দেয়। HTML-এ, স্ট্রিংটি একটি ইমেজ ট্যাগের src-এ ফেলুন; CSS-এ, একটি ব্যাকগ্রাউন্ডের জন্য এটিকে url("…")-এর ভেতরে রাখুন; Markdown-এ, ইমেজ সিনট্যাক্স ![alt](data:image/png;base64,…) ব্যবহার করুন। এটি একটি অতিরিক্ত HTTP রিকোয়েস্ট বাদ দেয়, যা ছোট আইকন, সিঙ্গেল-ফাইল পেজ এবং অফলাইন ডেমোর জন্য সুবিধাজনক।

ইনলাইনিং বিশেষভাবে HTML ইমেইলে সাধারণ, যেখানে বার্তায় ইমেজ বান্ডিল করলে ভাঙা লিংক এবং "ইমেজ ডাউনলোড করুন" প্রম্পট এড়ানো যায় — যদিও কিছু ক্লায়েন্ট যেমন Outlook Base64 ইমেজ ব্লক করতে পারে, তাই সবসময় আগে পরীক্ষা করুন। ডেভেলপাররা JSON পেলোড, ডেটাবেস এবং কনফিগারেশন ফাইলেও ছোট Base64 ইমেজ সংরক্ষণ করে যেখানে একটি বাইনারি ফাইল অস্বস্তিকর হতো।

JavaScript এবং Python-এ ইমেজ থেকে Base64

JavaScript-এ, ব্রাউজারই কাজটি করে দেয়: const r = new FileReader(); r.onload = () => use(r.result); r.readAsDataURL(file); আপনাকে সম্পূর্ণ data URI দেয়। React-এ, একটি ফাইল ইনপুটের onChange হ্যান্ডলারে এটি র‍্যাপ করুন; Next.js-এ, আপনি Node-এর Buffer.from(bytes).toString('base64') ব্যবহার করে সার্ভার-সাইডেও ইমেজ এনকোড করতে পারেন। এই কনভার্টারটি ঠিক FileReader API ব্যবহার করে, তাই আপনি যা কপি করেন তা আপনার নিজের কোডে যা পাবেন তার সাথে মেলে।

Python-এ, base64 মডিউল দিয়ে কাঁচা বাইট এনকোড করুন: base64.b64encode(open('image.png','rb').read()).decode(), তারপর এর সামনে data:image/png;base64, যোগ করুন। Pillow (PIL) দিয়ে, প্রথমে ইমেজটি একটি BytesIO বাফারে সংরক্ষণ করুন এবং বাফারটি Base64-এনকোড করুন। কোনো স্ক্রিপ্ট না চালিয়ে দ্রুত আপনার আউটপুট যাচাই করতে এই টুলটি ব্যবহার করুন।

প্রতিযোগী তুলনা: UtiloKit বনাম base64.guru, base64encoder.io, browserling

base64.guru অনলাইনে সবচেয়ে বেশি ভিজিট হওয়া Base64 টুলগুলোর একটি, কিন্তু এটি আপনার ইমেজ তাদের সার্ভারে আপলোড করে — লোগো, প্রোডাক্ট মকআপ, বা গোপনীয় ডকুমেন্টের জন্য একটি উল্লেখযোগ্য প্রাইভেসি সমস্যা। base64encoder.io একইভাবে কাজ করে, ফাইল সার্ভার-সাইডে প্রসেস করে। Browserling-এর ইমেজ-টু-Base64 টুলও সার্ভার-সাইড এবং ফাইলের আকার (ফ্রি টিয়ারে ৭৫ MB ক্যাপ) এবং দৈনিক রূপান্তরের সংখ্যা দিয়ে ফ্রি ব্যবহারকারীদের সীমাবদ্ধ করে।

UtiloKit আপনার ডিভাইসের RAM যতটা সামলাতে পারে ততক্ষণ পর্যন্ত কোনো ফাইল আকারের সীমাবদ্ধতা ছাড়া, কোনো দৈনিক সীমা ছাড়া, এবং আপনার মেশিন থেকে কোনো ডেটা না বেরিয়ে সম্পূর্ণভাবে আপনার ব্রাউজারে চলে। আপনি একই আউটপুট পাবেন — একটি বৈধ data URI — সাথে অতিরিক্ত স্নিপেট (CSS, HTML, Markdown) যা উপরের টুলগুলো প্রদান করে না। প্রোপ্রাইটারি অ্যাসেট নিয়ে কাজ করা দলগুলোর জন্য, প্রাইভেসির পার্থক্যটি উল্লেখযোগ্য: কোনো সার্ভার কখনও আপনার ইমেজ দেখে না।

কখন Base64 ব্যবহার করবেন — এবং কখন নয়

Base64 ছোট, খুব কমই পরিবর্তিত হওয়া অ্যাসেটের জন্য নিখুঁত, কিন্তু এটি বিনামূল্যে নয়: এনকোড করা টেক্সট মূল ফাইলের চেয়ে প্রায় ৩৩% বড়, এবং একটি ইনলাইন করা ইমেজ নিজে থেকে ক্যাশ বা lazy-load করা যায় না। বড় ছবি বা একাধিক পেজে ব্যবহৃত ইমেজের জন্য, একটি সাধারণ ইমেজ ফাইল (এবং HTTP ক্যাশিং) দ্রুত লোড হবে। একটি সাধারণ নিয়ম হিসেবে, প্রায় ১০ KB-এর নিচের ছোট আইকন এবং লোগো ইনলাইন করুন, এবং এর চেয়ে বড় সবকিছু স্ট্যান্ডার্ড ফাইল হিসেবে রাখুন।

আপনি একটি ইমেজকে Base64 স্ট্রিংয়ে এনকোড করছেন, Base64কে আবার ইমেজে ডিকোড করছেন, বা কেবল একটি data URI পরিদর্শন করছেন — এই টুলটি দ্রুত, প্রাইভেট এবং সম্পূর্ণ ফ্রি — প্রতিটি রূপান্তর আপনার ডিভাইসেই থাকে। আইফোন, আইপ্যাড, অ্যান্ড্রয়েড এবং সব আধুনিক ডেস্কটপ ব্রাউজারে কাজ করে, কোনো ইনস্টলেশন প্রয়োজন ছাড়াই।

Base64 এনকোডিং কীভাবে কাজ করে

Base64 এনকোডিং ৩ বাইট (২৪ বিট) গ্রুপে বাইনারি ডেটা নেয় এবং প্রতিটি গ্রুপকে ৪টি ASCII ক্যারেক্টার — প্রতি ক্যারেক্টারে ৬ বিট — হিসেবে পুনরায় এনকোড করে, একটি ৬৪-ক্যারেক্টার বর্ণমালা থেকে টানা: বড় হাতের A–Z, ছোট হাতের a–z, সংখ্যা ০–৯, প্লাস + এবং /। যখন ইনপুট দৈর্ঘ্য ৩-এর গুণিতক নয়, এক বা দুটি = প্যাডিং ক্যারেক্টার যোগ করা হয় যাতে আউটপুট সবসময় ৪-এর গুণিতক ক্যারেক্টার হয়। এই যান্ত্রিক প্রক্রিয়াটি RFC 4648-এ সংজ্ঞায়িত, একই স্ট্যান্ডার্ড যা TLS, MIME এবং HTTP Basic authentication ব্যবহার করে।

কৌশলটি আবিষ্কার হয়েছিল একটি সুনির্দিষ্ট সমস্যা সমাধান করতে: প্রাথমিক SMTP ইমেইল সার্ভার শুধুমাত্র ৭-বিট ASCII টেক্সট বহন করার জন্য ডিজাইন করা হয়েছিল। ইমেজের মতো বাইনারি ফাইলে সব ২৫৬টি বাইট মান থাকে, যার অনেকগুলো SMTP রাউটার নীরবে বিকৃত বা বাদ দিয়ে দিত। Base64 সেই স্বেচ্ছাচারী বাইটগুলোকে প্রিন্টযোগ্য ASCII-এর একটি উপসেটে রূপান্তরিত করে যা প্রতিটি মেইল রিলে অক্ষত অবস্থায় পাস করে দেয়। এর খরচ একটি অনুমানযোগ্য ৩৩% আকার বৃদ্ধি — বাইনারির প্রতি ৩ বাইট ৪টি ক্যারেক্টার হয়ে যায়, তাই একটি ১২ KB PNG প্রায় ১৬ KB টেক্সটে এনকোড হয়।

একটি ঘনিষ্ঠভাবে সম্পর্কিত ভ্যারিয়েন্ট, যাকে Base64URL বলা হয় (RFC 4648-এও সংজ্ঞায়িত), +-কে - দিয়ে এবং /-কে _ দিয়ে প্রতিস্থাপন করে, এবং শেষের = প্যাডিং বাদ দেয়। এটি আউটপুটকে percent-encoding ছাড়াই URL এবং ফাইলনেমে ব্যবহারের জন্য নিরাপদ করে তোলে। JWT টোকেন এবং অনেক ওয়েব API Base64URL ব্যবহার করে; স্ট্যান্ডার্ড Base64 (+ এবং / সহ) data URI-এর ভেতরে ব্যবহৃত হয় কারণ , ডিলিমিটার এটিকে আগের MIME টাইপ ঘোষণা থেকে আলাদা করে দেয়।

Data URI — সম্পূর্ণ স্পেসিফিকেশন

একটি data URI RFC 2397-এ সংজ্ঞায়িত এবং data:[<mediatype>][;base64],<data> ফরম্যাট অনুসরণ করে। mediatype হলো একটি স্ট্যান্ডার্ড MIME টাইপ যেমন image/png, image/jpeg, image/svg+xml, বা image/webp। বাদ দেওয়া হলে এটি ডিফল্টভাবে text/plain;charset=US-ASCII হয়ে যায়। টেক্সট-ভিত্তিক ডেটার জন্য আপনি একটি চারসেটও নির্দিষ্ট করতে পারেন — উদাহরণস্বরূপ data:text/html;charset=utf-8,<h1>Hello</h1> — যা সম্পূর্ণ HTML ফ্র্যাগমেন্ট বা CSS স্টাইলশিটকে data URI হিসেবে এমবেড করার সুযোগ দেয়।

SVG জানার মতো একটি বিশেষ ক্ষেত্র: যেহেতু SVG হলো XML-ভিত্তিক টেক্সট, এটি একেবারে কোনো Base64 এনকোডিং ছাড়াই URL এনকোডিং ব্যবহার করে একটি data URI-তে এমবেড করা যায় — data:image/svg+xml,%3Csvg …%3E। URL-এনকোড করা SVG সাধারণত Base64-এনকোড করা SVG-এর চেয়ে ছোট হয় কারণ Base64 ৩৩% ওভারহেড যোগ করে যেখানে URL এনকোডিং শুধু বিশেষ ক্যারেক্টার বাড়ায়। আধুনিক ব্রাউজার উভয় ফর্মই গ্রহণ করে, কিন্তু Base64 SVG সর্বজনীনভাবে সমর্থিত, পুরনো ইমেইল ক্লায়েন্ট এবং Internet Explorer-সহ।

একটি ব্রাউজার যখন একটি img src, একটি CSS url(), বা একটি iframe src-এ একটি data URI দেখে, এটি একে একটি বাহ্যিক URL থেকে ফেচ করা রিসোর্সের মতোই ব্যবহার করে: এটি MIME টাইপ পার্স করে, ডেটা ডিকোড করে, এবং ফলাফলটি উপযুক্ত রেন্ডারারে পাঠায়। কোনো অতিরিক্ত নেটওয়ার্ক রিকোয়েস্ট করা হয় না। ব্রাউজারের রেন্ডারিং পাইপলাইন শুধু একটি ইতিমধ্যে-ডিকোড করা বাইট স্ট্রিম দেখে — এটি একটি data URI নাকি একটি HTTP রেসপন্স থেকে এসেছে তা ডাউনস্ট্রিম পার্সিং এবং ডিসপ্লে ইঞ্জিনের কাছে স্বচ্ছ।

ইমেইল ক্লায়েন্টে ইমেজ এবং data URI সমস্যা

ইমেইল ক্লায়েন্টগুলোর ব্যাপকভাবে ভিন্ন ইমেজ-হ্যান্ডলিং আচরণ রয়েছে যা সরাসরি প্রভাবিত করে কীভাবে আপনার ইমেজ এমবেড করা উচিত। Outlook 2007–2019 একটি প্রকৃত ব্রাউজার ইঞ্জিনের পরিবর্তে Microsoft Word-এর রেন্ডারিং ইঞ্জিন ব্যবহার করে, এবং সেই ইঞ্জিন data URI সমর্থন করে না — একটি Base64 ইনলাইন ইমেজ কেবল রেন্ডার হয় না। Gmail বাহ্যিকভাবে লিংক করা ইমেজগুলোকে Google-এর নিজস্ব সার্ভারের মাধ্যমে প্রক্সি করে (ট্র্যাকিং পিক্সেল সরাতে), কিন্তু HTML ইমেইলে ইনলাইন Base64 ইমেজ সমর্থন করে। Apple Mail সম্পূর্ণভাবে data URI সমর্থন করে, বেশিরভাগ আধুনিক ওয়েবমেইল ক্লায়েন্টের মতোই।

নির্ভরযোগ্য HTML ইমেইলের জন্য প্রস্তাবিত পদ্ধতি হলো data URI-এর পরিবর্তে Content-ID (CID) এমবেডিং ব্যবহার করা — MIME অংশ হিসেবে ইমেজ সংযুক্ত করে এবং src="cid:image1" দিয়ে সেগুলো রেফারেন্স করা। CID ইমেজ Outlook-এ কাজ করে কারণ ইমেইল ক্লায়েন্টের রেন্ডারার সেগুলো একটি URL বা একটি ডিকোড করা ডেটা স্ট্রিং থেকে নয়, MIME অ্যাটাচমেন্ট থেকে ফেচ করে। তবে, আপনার ইমেইল যদি একটি একক-ফাইল HTML ডকুমেন্ট হয় (একটি রসিদ, একটি রিপোর্ট এক্সপোর্ট, একটি প্রিভিউ) বরং একটি মাল্টিপার্ট MIME বার্তার পরিবর্তে, Base64 এখনও একটি ফাইলে ইমেজ বান্ডিল করার একমাত্র উপায়।

ব্যবহারিক সুপারিশ: আপনার নিয়ন্ত্রণে থাকা ফাইল যেভাবে খোলা হয় সেই ট্রানজ্যাকশনাল সিঙ্গেল-ফাইল HTML এবং স্বয়ংসম্পূর্ণ রিপোর্টে Base64 ইনলাইন ইমেজ ব্যবহার করুন, এবং আপনার দর্শক Outlook ব্যবহার করলে পরীক্ষা করুন। Mailchimp বা SendGrid-এর মতো প্রোভাইডারের মাধ্যমে পাঠানো বাল্ক ইমেইল ক্যাম্পেইনের জন্য, একটি CDN-এ ইমেজ হোস্ট করুন এবং সেগুলোতে লিংক করুন — CID পদ্ধতি বড় স্কেলে অব্যবহারিক এবং বেশিরভাগ ESP যাই হোক না কেন ট্র্যাকিং এবং প্রক্সি উদ্দেশ্যে ইমেজ লিংক পুনর্লিখন করে।

পারফরম্যান্স প্রভাব এবং ব্রাউজার সীমা

HTTP/1.1 যুগে, ব্রাউজার একটি ডোমেইনে একযোগে সংযোগ সীমাবদ্ধ করত (সাধারণত ৬টি), তাই প্রতিটি অতিরিক্ত ইমেজ ফাইল একটি মূল্যবান সংযোগ স্লট গ্রহণ করত এবং TCP হ্যান্ডশেক ও DNS লুকআপ লেটেন্সি যোগ করত। ছোট ইমেজগুলোকে data URI হিসেবে ইনলাইন করা সেই রাউন্ড-ট্রিপগুলো সম্পূর্ণভাবে বাদ দিত, যা আইকন-ভারী ইন্টারফেসের জন্য একটি পরিমাপযোগ্য জয় ছিল। HTTP/2-এর সাথে সেই যুক্তি উল্লেখযোগ্যভাবে দুর্বল হয়ে পড়ে, যা একটি একক সংযোগের ওপর সব রিকোয়েস্ট মাল্টিপ্লেক্স করে — প্রতি-ফাইল ওভারহেড যা অনেক ছোট বাহ্যিক ইমেজকে ধীর করে তুলত তা মূলত অদৃশ্য হয়ে যায়, আধুনিক স্ট্যাকে data URI-এর জন্য সংযোগ-সাশ্রয়ের যুক্তিকে অনেক কম আকর্ষণীয় করে তোলে।

data URI দৈর্ঘ্যের ওপর ব্রাউজার সীমা ঐতিহাসিকভাবে ভিন্ন ছিল: Internet Explorer 8 data URI-কে ৩২ KB-তে সীমাবদ্ধ করত, ছোট আইকনের বাইরে যেকোনো কিছুর সাথে এটিকে অসামঞ্জস্যপূর্ণ করে তুলত। আধুনিক ব্রাউজার — Chrome, Firefox, Safari, Edge — কোনো প্রামাণ্য ব্যবহারিক সীমা আরোপ করে না, কিন্তু অত্যন্ত দীর্ঘ data URI (মাল্টি-মেগাবাইট ইমেজ) এখনও HTML পার্সার পারফরম্যান্সকে প্রভাবিত করতে পারে কারণ পার্সার এটির সম্মুখীন হলে পুরো স্ট্রিংটি সিঙ্ক্রোনাসভাবে পড়তে এবং ডিকোড করতে হয়। আরও গুরুত্বপূর্ণভাবে, যেহেতু একটি data URI HTML বা CSS ডকুমেন্টের অংশ, এটি স্বাধীনভাবে ক্যাশ হয় না: প্রতিটি পেজ লোডে ইমেজটি পুনরায় ট্রান্সমিট এবং পুনরায় ডিকোড হয়, এমনকি এতে কিছু পরিবর্তন না হলেও।

ব্যাপকভাবে গৃহীত পারফরম্যান্স নির্দেশিকা হলো শুধু প্রায় ৪ KB-এর নিচের ইমেজ ইনলাইন করা — সেই সীমা যেখানে HTTP রিকোয়েস্ট ওভারহেড (TCP রাউন্ড-ট্রিপ, হেডার, সার্ভার প্রসেসিং সময়) ৩৩% Base64 আকার জরিমানার চেয়ে বেশি হয়ে যায়। সেই সীমার ওপরে, একটি দীর্ঘস্থায়ী Cache-Control: max-age হেডার সহ পরিবেশিত একটি বাহ্যিক ইমেজ ফাইল প্রায় সবসময় পুনরাবৃত্তি ভিজিটে দ্রুত লোড হবে। webpack, Vite এবং Next.js-এর মতো বিল্ড টুল ঠিক এই হিউরিস্টিক প্রয়োগ করে: তারা তাদের কনফিগার করা সীমার (প্রায়ই ৪–৮ KB) নিচের অ্যাসেটগুলো স্বয়ংক্রিয়ভাবে ইনলাইন করে এবং বড় যেকোনো কিছুর জন্য আলাদা ফাইল প্রকাশ করে।

Frequently asked questions

আমি কীভাবে একটি ইমেজকে Base64-এ রূপান্তর করব?

ওপরের বক্সে একটি ইমেজ ড্রপ করুন, ব্রাউজ করতে ক্লিক করুন, আপনার ক্লিপবোর্ড থেকে পেস্ট করুন, বা একটি URL থেকে লোড করুন। টুলটি সাথে সাথে ইমেজটিকে একটি Base64 স্ট্রিংয়ে রূপান্তরিত করে এবং একটি রেডি data URI দেখায় যা আপনি CSS, HTML বা Markdown হিসেবে কপি করতে পারেন। সবকিছু আপনার ব্রাউজারে ঘটে — ইমেজটি কখনও কোনো সার্ভারে আপলোড হয় না, প্রাইভেট বা সংবেদনশীল ইমেজের জন্য এটিকে নিরাপদ করে তোলে।

আমি কীভাবে Base64 আবার ইমেজে ফিরিয়ে আনব?

Base64 → Image ট্যাবে সুইচ করুন এবং একটি data URI (data:image/png;base64,…) বা একটি raw Base64 স্ট্রিং পেস্ট করুন। টুলটি এটি ডিকোড করে, ইমেজটি প্রিভিউ করে, এবং এটি একটি ফাইল হিসেবে ডাউনলোড করার সুযোগ দেয়। এটি স্বয়ংক্রিয়ভাবে ফরম্যাট শনাক্ত করে, তাই PNG, JPG, SVG, WebP এবং GIF সবই কাজ করে। সম্পূর্ণ ডিকোড আপনার ব্রাউজারে স্থানীয়ভাবে ঘটে — কোনো সার্ভার রিকোয়েস্ট করা হয় না এবং আপনার Base64 স্ট্রিং কখনও কোথাও ট্রান্সমিট হয় না।

আমি কীভাবে HTML-এ একটি Base64 ইমেজ এমবেড করব?

একটি img ট্যাগের src হিসেবে Base64 data URI ব্যবহার করুন: এনকোড করা স্ট্রিংটি src="data:image/png;base64,…"-এ পেস্ট করুন। একটি আলাদা ফাইল রিকোয়েস্ট ছাড়াই একটি সম্পূর্ণ, রেডি-টু-পেস্ট ইমেজ ট্যাগ পেতে ওপরের "Copy <img>" এ ক্লিক করুন — ইমেইল, সিঙ্গেল-ফাইল পেজ এবং ইনলাইন আইকনের জন্য আদর্শ। এটি একটি অতিরিক্ত HTTP রাউন্ড-ট্রিপ সরিয়ে দেয় এবং মূল ইমেজ ফাইল উপলব্ধ না থাকলেও কাজ করে।

আমি কীভাবে CSS-এ একটি Base64 ইমেজ ব্যবহার করব?

url()-এর ভেতরে data URI রেফারেন্স করুন — উদাহরণস্বরূপ background-image: url("data:image/png;base64,…")। সম্পূর্ণ background-image রুল পেতে ওপরের "Copy CSS" এ ক্লিক করুন। এভাবে ছোট ব্যাকগ্রাউন্ড এবং আইকন ইনলাইন করলে একটি HTTP রিকোয়েস্ট সরে যায় এবং ডিজাইন-সিস্টেম আইকন, লোডার স্পিনার এবং সাজসজ্জাগত উপাদানের জন্য এটি সাধারণ যা কদাচিৎ পরিবর্তিত হয়। এটি সিঙ্গেল-ফাইল HTML ডেমোকেও সম্পূর্ণভাবে স্বয়ংসম্পূর্ণ করে তোলে।

আমি কীভাবে JavaScript-এ ইমেজকে Base64-এ রূপান্তর করব?

ব্রাউজারে, FileReader API দিয়ে ফাইলটি পড়ুন: const reader = new FileReader(); reader.onload = () => console.log(reader.result); reader.readAsDataURL(file)। reader.result হলো সম্পূর্ণ data:image/...;base64 URI। React বা Next.js-এ, একটি ইনপুট এলিমেন্টের useEffect বা onChange হ্যান্ডলারের ভেতরে এটি কল করুন। এই কনভার্টারটি ঠিক সেই পদ্ধতি ব্যবহার করে, সম্পূর্ণভাবে ক্লায়েন্ট-সাইডে। একটি লোকাল সার্ভার সেটআপ না করেই আপনার নিজের JavaScript বাস্তবায়ন দ্রুত যাচাই করতে এখানকার আউটপুট ব্যবহার করতে পারেন।

আমি কীভাবে Python-এ ইমেজকে Base64-এ রূপান্তর করব?

বাইনারি মোডে ফাইলটি খুলুন এবং এনকোড করুন: import base64; data = base64.b64encode(open('image.png', 'rb').read()).decode(); uri = f'data:image/png;base64,{data}'। PIL/Pillow দিয়ে আপনি প্রথমে একটি BytesIO বাফারে ইমেজ সংরক্ষণ করতে পারেন, তারপর বাফারের বাইট base64-এনকোড করতে পারেন। প্রোডাকশন কোডে এটি এমবেড করার আগে আপনার Python আউটপুট আপনার প্রত্যাশার সাথে মেলে কিনা যাচাই করতে এই অনলাইন টুলটি ব্যবহার করুন।

একটি Base64 ইমেজ / data URI কীসের জন্য ব্যবহৃত হয়?

একটি data URI ইমেজ বাইট সরাসরি আপনার HTML, CSS, JSON বা ইমেইলে টেক্সট হিসেবে এমবেড করে, তাই ইমেজটি একটি আলাদা HTTP রিকোয়েস্টের পরিবর্তে ডকুমেন্টের সাথেই লোড হয়। এটি ছোট আইকন, HTML ইমেইলে লোগো, সিঙ্গেল-ফাইল ডেমো এবং ডেটাবেস বা কনফিগারেশন ফাইলে ছোট ইমেজ সংরক্ষণের জন্য আদর্শ। ডেভেলপাররা একই পেজে ক্যানভাস অপারেশনে ইমেজ লোড করার সময় CORS সীমাবদ্ধতা এড়াতেও এটি ব্যবহার করেন। প্রথম লোডে একটি অতিরিক্ত নেটওয়ার্ক রাউন্ড-ট্রিপ বাদ দিতে ফেভিকন সাধারণত HTML হেডে data URI হিসেবে এমবেড করা হয়।

আমার কি বড় ইমেজ Base64 হিসেবে ইনলাইন করা উচিত?

সাধারণত না। Base64 এনকোডিং ডেটাকে মূল বাইনারির চেয়ে প্রায় ৩৩% বড় করে দেয়, এবং ইনলাইন করা ইমেজ ব্রাউজার দ্বারা আলাদাভাবে ক্যাশ বা loading="lazy" দিয়ে lazy-load করা যায় না। ফেভিকন, ছোট লোগো বা প্রায় ১০ KB-এর নিচের আইকন স্প্রাইটের মতো ছোট, খুব কমই পরিবর্তিত হওয়া অ্যাসেটের জন্য Base64 সংরক্ষণ করুন। বড় ফটো, হিরো ইমেজ, বা অনেক পেজে পুনর্ব্যবহৃত অ্যাসেটের জন্য, সঠিক HTTP ক্যাশিং হেডারসহ পরিবেশিত নিয়মিত ইমেজ ফাইল হিসেবে রাখুন।

এখানে ইমেজকে Base64-এ রূপান্তর করা কি নিরাপদ?

হ্যাঁ, সম্পূর্ণ নিরাপদ। এনকোডিং এবং ডিকোডিং FileReader এবং Canvas API ব্যবহার করে সম্পূর্ণভাবে আপনার ব্রাউজারে ঘটে — আপনার ইমেজ কখনও আপনার ডিভাইস ছেড়ে যায় না এবং কিছুই সার্ভারে পাঠানো হয় না। এটি <strong>base64.guru</strong> এবং <strong>base64encoder.io</strong>-এর মতো টুলের ওপর একটি মূল প্রাইভেসি সুবিধা, যারা প্রসেসিংয়ের জন্য আপনার ইমেজ তাদের সার্ভারে আপলোড করে। UtiloKit-এ, প্রাইভেট, গোপনীয়, বা অপ্রকাশিত ইমেজ পুরো রূপান্তর প্রক্রিয়া জুড়ে আপনার মেশিনেই থাকে। পেজ লোড হওয়ার পর আপনি ইন্টারনেট থেকে সংযোগ বিচ্ছিন্নও করতে পারেন এবং এটি এখনও কাজ করে।

কোন ইমেজ ফরম্যাট সমর্থিত?

আপনার ব্রাউজার যেকোনো ফরম্যাট পড়তে পারে তা এনকোডিংয়ের জন্য কাজ করে, PNG, JPEG/JPG, SVG, WebP, GIF, AVIF, BMP এবং ICO সহ। ডিকোডিং প্রতিটি স্ট্যান্ডার্ড data:image/* MIME টাইপ সমর্থন করে এবং ডাউনলোড করার আগে ফলাফলটি প্রিভিউ করে। SVG ফাইল বিশেষ ব্যবস্থাপনা পায় — তাদের Base64 এনকোডিং ছাড়াই সরাসরি CSS-এ url('data:image/svg+xml,…') দিয়ে URL এনকোডিংসহ এমবেড করা যায়, কিন্তু Base64 বেশি সর্বজনীন এবং সব ব্রাউজার ও ইমেইল ক্লায়েন্টে কাজ করে।

আমি কি Markdown বা ইমেইলে একটি Base64 ইমেজ এমবেড করতে পারি?

হ্যাঁ। ![alt](data:image/png;base64,…)-এর জন্য "Copy Markdown" বাটন ব্যবহার করুন, বা HTML ইমেইলের জন্য "Copy <img>" ব্যবহার করুন। মনে রাখবেন কিছু ইমেইল ক্লায়েন্ট (বিশেষত Outlook এবং Gmail-এর মোবাইল অ্যাপ) Base64 ইমেজ বাদ দেয় বা ব্লক করে, তাই বড় পরিসরে পাঠানোর আগে পরীক্ষা করুন। নিউজলেটার ক্যাম্পেইনের জন্য, একটি CDN-এ ইমেজ হোস্ট করে সেগুলোতে লিংক করা নিরাপদ। একক-প্রাপক ট্রানজ্যাকশনাল ইমেইলের জন্য, Base64 বেশিরভাগ ক্লায়েন্টে নির্ভরযোগ্যভাবে কাজ করে।

UtiloKit base64.guru বা base64encoder.io-এর সাথে কীভাবে তুলনীয়?

Base64.guru এবং base64encoder.io উভয়ই আপনার ইমেজ সার্ভার-সাইডে প্রসেস করে — আপনার ফাইল তাদের ইনফ্রাস্ট্রাকচারে আপলোড হয়। UtiloKit-এর Image to Base64 কনভার্টার সম্পূর্ণ ১০০% আপনার ব্রাউজারে চলে: কোনো আপলোড নেই, কোনো সার্ভার নেই, কোথাও কোনো ডেটা সংরক্ষিত হয় না। UtiloKit রেডি-টু-পেস্ট CSS, HTML এবং Markdown স্নিপেটও প্রদান করে, দ্বিমুখী রূপান্তর (এনকোড এবং ডিকোড) সমর্থন করে, এবং পেজ লোড হওয়ার পর অফলাইনে কাজ করে। এটি ফাইলের আকার বা রূপান্তরের সংখ্যায় কোনো সীমা ছাড়াই সম্পূর্ণ ফ্রি।

এই Image to Base64 কনভার্টার কি ফ্রি?

সম্পূর্ণ ফ্রি, কোনো সাইনআপ নেই, কোনো ওয়াটারমার্ক নেই, এবং ফাইলের আকার বা ইমেজের সংখ্যায় কোনো সীমা নেই। browserling.com-এর বিপরীতে, যা ফ্রি ইমেজ রূপান্তর সীমাবদ্ধ করে এবং একটি নির্দিষ্ট আকারের ওপরে ফাইলের জন্য একটি পেইড প্ল্যান প্রয়োজন, UtiloKit-এর কোনো সীমাবদ্ধতা নেই। যেহেতু এটি ক্লায়েন্ট-সাইড, কোনো প্রতি-ইমেজ বা ব্যান্ডউইথ চার্জ নেই — আপনার ব্রাউজারের মেমরি যতটা সামলাতে পারে ততটা বড়, যত ইচ্ছা ইমেজ রূপান্তর করুন।

আমি কি এটি আইফোন বা অ্যান্ড্রয়েডে ব্যবহার করতে পারি?

হ্যাঁ। টুলটি সম্পূর্ণভাবে রেসপন্সিভ এবং আইফোনে Safari এবং অ্যান্ড্রয়েডে Chrome সহ প্রতিটি মোবাইল ব্রাউজারে কাজ করে। আপনি আপনার ক্যামেরা রোল বা Files অ্যাপ থেকে ইমেজ বাছাই করতে ট্যাপ করতে পারেন, বা একটি রিমোট ইমেজ লোড করতে একটি URL পেস্ট করতে পারেন। আউটপুট আপনার ক্লিপবোর্ডে কপি হয় তাই আপনি এটি সরাসরি Notion, একটি কোড এডিটর, বা অন্য একটি অ্যাপে পেস্ট করতে পারেন। কোনো অ্যাপ ডাউনলোড দরকার নেই — শুধু আপনার মোবাইল ব্রাউজারে পেজটি খুলুন এবং এটি ঠিক ডেস্কটপ সংস্করণের মতোই কাজ করে।

যেকোনো ছবির কোণ গোলাকার করুন এবং স্বচ্ছ PNG ডাউনলোড করুন — আপনার ব্রাউজারে।

ছবি ও মিডিয়া