Base64 ইমেজ এনকোডিং বাইনারি ছবির তথ্যকে একটি ASCII স্ট্রিংয়ে রূপান্তর করে, যা কোনো বাহ্যিক ফাইলের উল্লেখ ছাড়াই সরাসরি HTML, CSS বা JSON-এ যুক্ত করা যায়। ফলাফল হলো একটি data URI — একটি স্বয়ংসম্পূর্ণ স্ট্রিং যা data:image/png;base64, দিয়ে শুরু হয়, তারপর ছবির Base64-এনকোড করা বাইট থাকে। ব্রাউজার data URI-কে ঠিক বাহ্যিক ইমেজ URL-এর মতোই ট্রিট করে: Base64 পেলোড ডিকোড করে ছবি ইনলাইনে প্রদর্শন করে।
এই পদ্ধতিটি RFC 2397 (data URI স্কিম) এবং RFC 4648 (Base64 এনকোডিং) দ্বারা সংজ্ঞায়িত। যখন একটি ছবি Base64-এনকোড করা হয়, প্রতি ৩ বাইট বাইনারি পিক্সেল তথ্য ৪টি ASCII বর্ণে পরিণত হয়, যা পেলোডের আকার প্রায় ৩৩% বৃদ্ধি করে। এই অতিরিক্ত আকার থাকা সত্ত্বেও, ইনলাইন ছবি প্রতিটি অ্যাসেটের জন্য একটি HTTP অনুরোধ দূর করে — যা ছোট ছবির (আইকন, লোগো, ১x১ ট্র্যাকিং পিক্সেল) ক্ষেত্রে গুরুত্বপূর্ণ অপ্টিমাইজেশন, যেখানে আলাদা অনুরোধের রাউন্ড-ট্রিপ বিলম্ব অতিরিক্ত বাইটের খরচকে ছাড়িয়ে যায়।
সমস্ত আধুনিক ব্রাউজার, ইমেইল ক্লায়েন্ট (কিছু সীমাবদ্ধতা সহ) এবং যেকোনো প্রেক্ষাপটে যেখানে স্ট্যান্ডার্ড URI সিনট্যাক্স গ্রহণযোগ্য, সেখানে data URI সমর্থিত। সিঙ্গেল-পেজ অ্যাপ্লিকেশন, HTML ইমেইল টেমপ্লেট, SVG স্প্রাইট এবং CSS background-image ডিক্লারেশনে এগুলো ব্যাপকভাবে ব্যবহৃত হয়, যেখানে মোট নেটওয়ার্ক অনুরোধের সংখ্যা কমানো পেজ লোড পারফরম্যান্স উন্নত করে।
কেন এই Base64 ইমেজ এনকোডার ব্যবহার করবেন?
এই টুলটি সরাসরি আপনার ব্রাউজারে যেকোনো ছবিকে ব্যবহারযোগ্য data URI-তে রূপান্তর করে — কোনো আপলোড, সার্ভার বা অ্যাকাউন্ট প্রয়োজন নেই।
⚡
তাৎক্ষণিক রূপান্তর
একটি ছবি ড্র্যাগ করে ড্রপ করুন অথবা ফাইল নির্বাচন করুন, এবং সম্পূর্ণ data URI সাথে সাথেই প্রদর্শিত হবে। সার্ভার প্রক্রিয়াকরণের জন্য অপেক্ষা নেই — FileReader API লোকালি সব হ্যান্ডেল করে।
🔒
গোপনীয়তা-কেন্দ্রিক প্রক্রিয়াকরণ
আপনার ছবি কখনো আপনার ডিভাইস ছেড়ে যায় না। এনকোডিং সম্পূর্ণরূপে ব্রাউজারে নেটিভ FileReader.readAsDataURL() মেথড ব্যবহার করে চলে। কোনো তথ্য কোনো সার্ভারে পাঠানো হয় না।
🌐
সমস্ত প্রধান ফরম্যাট সমর্থিত
PNG, JPEG, SVG, WebP, GIF, ICO, BMP এবং আপনার ব্রাউজার সমর্থিত যেকোনো অন্য ইমেজ ফরম্যাট গ্রহণ করে। ফাইল থেকে MIME টাইপ স্বয়ংক্রিয়ভাবে শনাক্ত করা হয়।
📦
কপি-রেডি আউটপুট
আউটপুট হলো একটি সম্পূর্ণ data URI স্ট্রিং — কোনো ম্যানুয়াল ফরম্যাটিং ছাড়াই সরাসরি HTML img src, CSS url() ডিক্লারেশন বা JSON পেলোডে পেস্ট করুন।
Base64 ইমেজ এনকোডিংয়ের ব্যবহারের ক্ষেত্র
ফ্রন্টএন্ড ডেভেলপমেন্ট
HTTP অনুরোধ দূর করতে ছোট আইকন ও UI অ্যাসেট সরাসরি HTML বা CSS-এ যুক্ত করুন। এটি above-the-fold ছবির জন্য ওয়াটারফল বিলম্ব কমায়, Largest Contentful Paint (LCP) স্কোর উন্নত করে।
HTML ইমেইল টেমপ্লেট
অনেক ইমেইল ক্লায়েন্ট ডিফল্টভাবে বাহ্যিক ছবি ব্লক করে। ইনলাইন Base64 ছবি প্রাপককে "ছবি লোড করুন" ক্লিক করতে না বলেই তাৎক্ষণিকভাবে প্রদর্শিত হয়, ওপেন রেট ও ভিজুয়াল কনসিস্টেন্সি উন্নত করে।
সিঙ্গেল-পেজ অ্যাপ্লিকেশন
মোট নেটওয়ার্ক অনুরোধের সংখ্যা কমাতে আপনার JavaScript বা CSS-এ ছোট অ্যাসেটগুলো data URI হিসেবে বান্ডল করুন। Webpack এবং Vite উভয়ই কনফিগারযোগ্য আকার সীমার নিচের অ্যাসেটের জন্য স্বয়ংক্রিয় Base64 ইনলাইনিং সমর্থন করে।
API ও JSON পেলোড
ব্যবহারকারীর অ্যাভাটার, স্বাক্ষর বা থাম্বনেইল Base64 স্ট্রিং হিসেবে এনকোড করুন যাতে সেগুলো সরাসরি JSON API প্রতিক্রিয়ায় অন্তর্ভুক্ত করা যায়। এটি ছোট ছবির জন্য আলাদা ফাইল-হোস্টিং এন্ডপয়েন্টের প্রয়োজনীয়তা দূর করে।
ডকুমেন্টেশন ও Markdown
Markdown ফাইল বা README ডকুমেন্টে data URI হিসেবে ডায়াগ্রাম বা স্ক্রিনশট যুক্ত করুন। ছবিগুলো ডকুমেন্টের সাথে থাকে এবং বাহ্যিক হোস্টিং ছাড়াই সঠিকভাবে প্রদর্শিত হয়।
পরীক্ষা ও প্রোটোটাইপিং
পরীক্ষার ফিকশার, Storybook স্টোরি বা প্রোটোটাইপ HTML ফাইলে প্লেসহোল্ডার ছবি হিসেবে Base64 data URI ব্যবহার করুন। প্রাথমিক ডেভেলপমেন্টের সময় স্ট্যাটিক ফাইল সার্ভার সেট আপ বা ইমেজ অ্যাসেট পরিচালনা করার প্রয়োজন নেই।
Data URI কাঠামো
একটি data URI ছবির ফরম্যাট ও বাইনারি বিষয়বস্তু একটি একক স্ট্রিংয়ে এনকোড করে। এর কাঠামো বোঝা প্রোগ্রামাটিকভাবে data URI তৈরি বা পার্স করার সময় সহায়তা করে:
উপাদান
বিবরণ
data:
URI scheme identifier
image/png
MIME type of the image
;base64,
Encoding declaration
iVBORw0KGgo...
Base64-encoded binary data
Base64 এনকোডিংয়ের জন্য ইমেজ ফরম্যাট তুলনা
ইমেজ ফরম্যাটের পছন্দ Base64 আউটপুটের আকার, ব্রাউজার সমর্থন এবং রেন্ডারিং বৈশিষ্ট্যকে প্রভাবিত করে। আপনার কন্টেন্ট টাইপের সাথে সবচেয়ে উপযুক্ত ফরম্যাট ব্যবহার করুন:
ফরম্যাট
MIME টাইপ
স্বচ্ছতা
সেরা ব্যবহার
PNG
image/png
Yes
Screenshots, icons, UI elements
JPEG
image/jpeg
No
Photos, gradients, large images
SVG
image/svg+xml
Yes
Logos, icons, scalable graphics
WebP
image/webp
Yes
Modern web images, smaller files
GIF
image/gif
Yes (1-bit)
Simple animations, small icons
ICO
image/x-icon
Yes
Favicons
কোড উদাহরণ
জনপ্রিয় ভাষা ও পরিবেশে ছবিকে Base64 data URI-তে রূপান্তর করার পদ্ধতি:
JavaScript (browser)
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(file)
// reader.result → "data:image/png;base64,iVBORw0KGgo..."
})
}
// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."
// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."
Python
import base64
# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
encoded = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."
# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"
with open('photo.jpg', 'rb') as f:
b64 = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:{mime};base64,{b64}'
Node.js
import { readFileSync } from 'fs'
import { lookup } from 'mime-types'
// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"
const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."
// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
return `data:${mimeType};base64,${buf.toString('base64')}`
}
CLI (bash)
# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'
# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"
# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy
# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"
প্রায়শই জিজ্ঞাসিত প্রশ্ন
Base64 এনকোডিংয়ের জন্য সর্বোচ্চ ছবির আকার কত?
Base64 স্পেসিফিকেশনে নিজেই কোনো কঠোর সীমা নেই। ব্রাউজারের data URI সমর্থন ভিন্ন: বেশিরভাগ আধুনিক ব্রাউজার কয়েক মেগাবাইট পর্যন্ত data URI পরিচালনা করতে পারে। তবে Base64 এনকোডিং আকার ৩৩% বৃদ্ধি করে, তাই ১ MB ছবি প্রায় ১.৩৩ MB টেক্সট হয়ে যায়। ১০-২০ KB-এর বড় ছবির জন্য, সঠিক ক্যাশিং সহ আলাদা ফাইল হিসেবে পরিবেশন করা বেশি কার্যকর।
Base64 এনকোডিং কি ছবির মান কমায়?
না। Base64 একটি ক্ষতিহীন এনকোডিং — এটি বিষয়বস্তু পরিবর্তন না করে বাইনারি তথ্যকে টেক্সটে রূপান্তর করে। ডিকোড করা তথ্য মূল ফাইলের সাথে বাইট-ফর-বাইট অভিন্ন। যেকোনো মানের ক্ষতি ছবির ফরম্যাট থেকে আসবে (যেমন, JPEG কম্প্রেশন), Base64 এনকোডিং থেকে নয়।
কেন Base64-এনকোড করা আউটপুট মূল ছবির চেয়ে বড়?
Base64 ৩ বাইট বাইনারি তথ্যকে ৪টি ASCII বর্ণ দিয়ে উপস্থাপন করে, যার ফলে আকার ৩৩% বৃদ্ধি পায়। একটি data URI প্রায় ২৫-৩০ বর্ণের একটি উপসর্গও যোগ করে (যেমন, data:image/png;base64,)। ছোট ছবির জন্য (২-৫ KB-এর নিচে), এই অতিরিক্ত আকার একটি HTTP অনুরোধ দূর করে কমানো হয়। বড় ছবির জন্য, আকারের জরিমানা বাহ্যিক ফাইলকে বেশি কার্যকর করে তোলে।
আমি কি CSS background-image-এ Base64 ছবি ব্যবহার করতে পারি?
হ্যাঁ। url() ফাংশনের মান হিসেবে data URI ব্যবহার করুন: background-image: url('data:image/png;base64,...')। এটি সমস্ত আধুনিক ব্রাউজারে কাজ করে। এটি ছোট, ঘন ঘন ব্যবহৃত ব্যাকগ্রাউন্ড প্যাটার্ন বা আইকনের জন্য সবচেয়ে কার্যকর যেখানে HTTP অনুরোধ এড়ানো সামান্য বড় CSS ফাইলের চেয়ে মূল্যবান।
সংবেদনশীল ছবির জন্য কি Base64 ইমেজ এনকোডিং নিরাপদ?
Base64 একটি এনকোডিং, এনক্রিপশন নয়। যে কেউ data URI দেখতে পাবে সে এটি মূল ছবিতে ডিকোড করতে পারবে। গোপনীয় ছবি সুরক্ষার জন্য Base64-এর উপর নির্ভর করবেন না। এই টুলটি সম্পূর্ণরূপে আপনার ব্রাউজারে ছবি প্রক্রিয়া করে — কোনো সার্ভারে তথ্য পাঠানো হয় না — কিন্তু ফলস্বরূপ data URI হলো সাধারণ টেক্সট যা আপনার HTML বা CSS সোর্সে প্রবেশাধিকার আছে এমন যে কেউ পড়তে পারবে।
আমি কীভাবে Base64 data URI-কে আবার ইমেজ ফাইলে রূপান্তর করব?
JavaScript-এ, data URI সহ fetch() ব্যবহার করুন এবং প্রতিক্রিয়ায় blob() কল করুন, তারপর একটি ডাউনলোড লিংক তৈরি করুন। Python-এ, কমা দিয়ে স্ট্রিংটি স্প্লিট করুন, base64.b64decode() দিয়ে Base64 অংশ ডিকোড করুন এবং বাইটগুলো একটি ফাইলে লিখুন। আপনি এই সাইটের Base64 Image Decoder টুলটিও ব্যবহার করতে পারেন।
আমার কি ওয়েবসাইটের সমস্ত ছবি Base64-এনকোড করা উচিত?
না। Base64 ইনলাইনিং ছোট ছবির জন্য উপকারী (আইকন, লোগো, ১x১ পিক্সেল) যেখানে HTTP অনুরোধের খরচ ৩৩% আকার বৃদ্ধির জরিমানা ছাড়িয়ে যায়। বড় ছবির জন্য, সঠিক ক্যাশ হেডার সহ আলাদা ফাইল ব্যবহার করুন — ব্রাউজার সেগুলো স্বাধীনভাবে ক্যাশ করতে এবং সমান্তরালে লোড করতে পারে। একটি সাধারণ সীমা হলো ২-৮ KB: এই আকারের নিচের ছবি ইনলাইনিং থেকে উপকৃত হয়, যেখানে বড় ছবি বাহ্যিক ফাইল হিসেবে পরিবেশন করা উচিত।