Why use Base64 for images?

Base64-encoded images can be embedded directly in HTML, CSS, or JSON without hosting the image as a separate file. This eliminates one HTTP request per image and is particularly valuable in HTML email where external image hosting may be blocked.

Does Base64 increase file size?

Yes, Base64 encoding increases the raw string size by approximately 33% compared to the binary image file. For this reason, Base64 embedding is most appropriate for small images like icons, logos, and decorative elements under 10 KB.

What is the difference between the data URL and the raw Base64 string?

The data URL includes the MIME type prefix (e.g., data:image/png;base64,) followed by the Base64 data. The raw Base64 string is just the encoded data without that prefix. Use the full data URL in HTML src attributes and CSS url() values; use the raw string when an API expects Base64-only input.

Is there a file size limit?

There is no server-side limit since all encoding happens in your browser. The practical limit depends on your browser's available memory. Images up to 10 MB encode reliably on modern devices. Very large images may slow down or crash the browser tab.

Which image formats are supported?

Any format your browser can load: PNG, JPG, WEBP, GIF, SVG, BMP, and ICO are all supported. The MIME type is detected automatically from the file and included in the data URL prefix (e.g., data:image/png;base64,).

Can I use the Base64 output in CSS?

Yes. Use the full data URL as the value of a CSS background-image property: background-image: url("data:image/png;base64,..."). This technique is useful for small decorative images and icons to eliminate extra HTTP requests, especially in critical CSS.

Can I use the Base64 output in a JSON API?

Yes. Copy the raw Base64 string (without the data URL prefix) to use as the value of an image field in a JSON payload. Many APIs that accept image data expect Base64 without the MIME prefix — check your API documentation to confirm which format is required.

What happens to transparency in the Base64 output?

Transparency is fully preserved in the Base64 output when the source is a PNG or WEBP with an alpha channel. The MIME type in the data URL prefix (data:image/png;base64,) tells the browser to render it with transparency intact.

ছবি থেকে Base64

নতুন

যেকোনো ছবিকে Base64 ডেটা URL স্ট্রিংয়ে রূপান্তর করুন

ডেভেলপার টুল

ছবি থেকে Base64 কীভাবে ব্যবহার করবেন

1আপনার ছবি আপলোড করুন
2তৈরি হওয়া Base64 স্ট্রিং কপি করুন
3HTML img src, CSS background-image, বা JSON payload-এ পেস্ট করুন
4সরাসরি আপনার HTML বা CSS-এ পেস্ট করুন

ছবি থেকে Base64 সম্পর্কে

ইমেজ থেকে Base64 আপনার ছবির ফাইলকে Base64 টেক্সট স্ট্রিংয়ে রূপান্তরিত করে যা সরাসরি HTML img ট্যাগ, CSS ব্যাকগ্রাউন্ড বা JSON পেলোডে এম্বেড করা যায় — আলাদা বার্তা তোলা রায়সেলোর ফাইল বিনা।

ছবি থেকে Base64-এর মূল বৈশিষ্ট্যসমূহ

PNG, JPG, WEBP, GIF ও SVG কে Base64-এ রূপান্তর করে
ব্যবহারের জন্য প্রস্তুত data URI string আউটপুট করে
সম্পূর্ণ encoded আউটপুট এক-ক্লিকে কপি করা যায়
encoded string-এর দৈর্ঘ্য ও আনুমানিক size দেখায়
drag-and-drop image upload সমর্থন করে
কোনো server upload ছাড়াই তাৎক্ষণিক encoding
FileReader API ব্যবহার করে 100% client-side
browser memory limit পর্যন্ত যেকোনো image size-এ কাজ করে

সমর্থিত ফরম্যাট

ইনপুট ফরম্যাট

PNGJPGWEBPGIFSVGBMPICO

আউটপুট ফরম্যাট

ডেটা URL Base64 স্ট্রিংকাঁচা Base64 স্ট্রিংHTML img স্নিপেট

আউটপুট data URL স্বয়ংক্রিয়ভাবে সঠিক MIME type prefix অন্তর্ভুক্ত করে (data:image/png;base64, ইত্যাদি)।

উদাহরণ

HTML email-এ inline icon embed করা

আপনার email HTML-এ icon সরাসরি embed করুন যাতে external image block হলেও দেখা যায়।

ইনপুট

ছোট 32×32 PNG icon

আউটপুট

data:image/png;base64,iVBOR... (full data URL)

CSS background image হিসেবে ব্যবহার

ছোট decorative asset-এর জন্য extra HTTP request এড়াতে CSS background-image property-তে data URL ব্যবহার করুন।

ইনপুট

ছোট decorative PNG texture

আউটপুট

background-image: url("data:image/png;base64,...")

JSON API প্রতিক্রিয়ায় ছবি

JSON পেলোডে "avatar" ফিল্ডের মান হিসেবে ডেটা URL প্রিফিক্স ছাড়া কাঁচা Base64 স্ট্রিং কপি করুন।

ইনপুট

User avatar PNG

আউটপুট

JSON field value-এর জন্য raw Base64 string

সাধারণ ব্যবহারের ক্ষেত্র

অতিরিক্ত HTTP রিকোয়েস্ট এড়াতে HTML এ সরাসরি ছোট আইকন এম্বেড করুন
পটভূমির গ্রাফিক্সের জন্য CSS এ ইনলাইনে ছবি অন্তর্ভুক্ত করুন
JSON API পেলোড বা কনফিগ ফাইলে ছবির ডেটা সংরক্ষণ করুন
এম্বেডেড ছবি সহ স্বয়ংসম্পূর্ণ HTML ইমেইল টেম্পলেট তৈরি করুন
PDF জেনারেশন স্ক্রিপ্টে এম্বেড করার জন্য সিগনেচার ছবি এনকোড করুন
JavaScript সোর্স ফাইলে সরাসরি ছোট স্প্রাইট বান্ডেল করুন

সমস্যা সমাধান

আউটপুট স্ট্রিং অত্যন্ত দীর্ঘ এবং এডিটর ধীর করছে

সমাধান

Base64 এনকোডিং আকার ~33% বাড়ায়। 100 KB এর বেশি ছবির জন্য, ইনলাইন ডেটা URI এর পরিবর্তে নিয়মিত ফাইল হিসেবে পরিবেশন করুন।

ডেটা URI ব্রাউজারে প্রদর্শিত হচ্ছে না

সমাধান

নিশ্চিত করুন ডেটা URI সঠিক MIME টাইপ প্রিফিক্স অন্তর্ভুক্ত করে, যেমন "data:image/png;base64," — টুলটি এটি স্বয়ংক্রিয়ভাবে তৈরি করে, তাই কপি করার সময় দুর্ঘটনাক্রমে ছাঁটাই হয়েছে কিনা দেখুন।

SVG এনকোডিং ভাঙা আউটপুট তৈরি করছে

সমাধান

SVG ফাইলের জন্য, URL-এনকোডিং কখনো কখনো Base64 এর চেয়ে বেশি নির্ভরযোগ্য। raw SVG সোর্স ব্যবহার করুন বা পরিবর্তে SVG স্ট্রিং URL-এনকোড করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

ছবির জন্য Base64 কেন ব্যবহার করবেন?

Base64 দিয়ে আলাদা ফাইল অনুরোধ ছাড়াই সরাসরি কোডে ছবি এম্বেড করা যায়।

Base64 কি ফাইলের আকার বাড়ায়?

হ্যাঁ, প্রায় ৩৩%। শুধুমাত্র যখন এম্বেড করা প্রয়োজন তখনই ব্যবহার করুন।

ডেটা URL এবং কাঁচা Base64 স্ট্রিংয়ের মধ্যে পার্থক্য কী?

ডেটা URL-এ MIME টাইপ প্রিফিক্স (data:image/png;base64,) থাকে। কাঁচা Base64 স্ট্রিং শুধু এনকোড করা ডেটা, প্রিফিক্স নেই।

ফাইল সাইজের কোনো সীমা আছে কি?

সার্ভার সাইডে কোনো সীমা নেই। আধুনিক ডিভাইসে 10 MB পর্যন্ত প্রতিছবি নির্ভরযোগ্যভাবে এনকোড হয়।

কোন ছবির ফরম্যাট সমর্থিত?

PNG, JPG, WEBP, GIF, SVG, BMP এবং ICO সমর্থিত।

CSS-এ Base64 আউটপুট ব্যবহার করতে পারি?

হ্যাঁ। CSS background-image প্রপার্টির মান হিসেবে পূর্ণ ডেটা URL ব্যবহার করুন।

JSON API-তে কি Base64 আউটপুট ব্যবহার করতে পারি?

হ্যাঁ। JSON payload-এ image field-এর value হিসেবে ব্যবহার করতে raw Base64 string copy করুন (data URL prefix ছাড়া)।

Base64 আউটপুটে transparency-এর কী হয়?

Source PNG হলে data URL-এ transparency সংরক্ষিত থাকে। prefix-এর MIME type (data:image/png;base64,) নিশ্চিত করে browser সঠিকভাবে render করে।