Base64 Image Encoder

HTML और CSS के लिए इमेज को Base64 Data URI में एन्कोड करें

यहाँ इमेज ड्रॉप करें या अपलोड करने के लिए क्लिक करें

PNG, JPG, SVG, WebP, GIF, AVIF समर्थित

Base64 इमेज एन्कोडिंग क्या है?

Base64 इमेज एन्कोडिंग बाइनरी इमेज डेटा को एक ASCII स्ट्रिंग में बदलती है जिसे HTML, CSS, या JSON में किसी बाहरी फ़ाइल का संदर्भ दिए बिना सीधे एम्बेड किया जा सकता है। परिणाम एक data URI होता है — एक स्व-संपूर्ण स्ट्रिंग जो data:image/png;base64, से आरंभ होती है, उसके बाद इमेज के Base64-एन्कोडेड बाइट होते हैं। ब्राउज़र data URI को बाहरी इमेज URL की तरह ही संसाधित करते हैं: वे Base64 पेलोड को डीकोड करके इमेज को इनलाइन प्रस्तुत करते हैं।

यह तकनीक RFC 2397 (data URI स्कीम) और RFC 4648 (Base64 एन्कोडिंग) द्वारा परिभाषित है। जब कोई इमेज Base64-एन्कोड होती है, तो बाइनरी पिक्सेल डेटा के प्रत्येक 3 बाइट 4 ASCII वर्ण बन जाते हैं, जिससे पेलोड का आकार लगभग 33% बढ़ जाता है। इस ओवरहेड के बावजूद, इनलाइन इमेज प्रत्येक संसाधन के लिए एक HTTP अनुरोध समाप्त कर देती हैं — यह एक महत्वपूर्ण अनुकूलन है जब इमेज छोटी हों (आइकन, लोगो, 1x1 ट्रैकिंग पिक्सेल) और एक अलग अनुरोध की राउंड-ट्रिप विलंबता अतिरिक्त बाइट की लागत से अधिक हो।

Data URI सभी आधुनिक ब्राउज़र, ईमेल क्लाइंट (कुछ सीमाओं के साथ) और किसी भी संदर्भ में समर्थित हैं जो मानक URI सिंटैक्स स्वीकार करता है। इनका व्यापक उपयोग एकल-पृष्ठ अनुप्रयोगों, HTML ईमेल टेम्प्लेट, SVG स्प्राइट और CSS background-image घोषणाओं में होता है जहाँ नेटवर्क अनुरोधों की कुल संख्या कम करने से अनुभूत लोड समय में सुधार होता है।

इस Base64 Image Encoder का उपयोग क्यों करें?

यह टूल किसी भी इमेज को सीधे आपके ब्राउज़र में उपयोग के लिए तैयार 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 में एम्बेड करें। यह महत्वपूर्ण ऊपरी-फोल्ड इमेज के लिए वॉटरफॉल विलंबता कम करता है, जिससे 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/pngMIME type of the image
;base64,Encoding declaration
iVBORw0KGgo...Base64-encoded binary data

Base64 एन्कोडिंग के लिए इमेज फ़ॉर्मेट की तुलना

इमेज फ़ॉर्मेट का चुनाव Base64 आउटपुट आकार, ब्राउज़र समर्थन और प्रस्तुति विशेषताओं को प्रभावित करता है। वह फ़ॉर्मेट चुनें जो आपके सामग्री प्रकार के लिए सबसे उपयुक्त हो:

फ़ॉर्मेटMIME प्रकारपारदर्शितासर्वोत्तम उपयोग
PNGimage/pngYesScreenshots, icons, UI elements
JPEGimage/jpegNoPhotos, gradients, large images
SVGimage/svg+xmlYesLogos, icons, scalable graphics
WebPimage/webpYesModern web images, smaller files
GIFimage/gifYes (1-bit)Simple animations, small icons
ICOimage/x-iconYesFavicons

कोड उदाहरण

लोकप्रिय भाषाओं और परिवेशों में इमेज को 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 एन्कोडिंग आकार 33% बढ़ा देती है, इसलिए 1 MB इमेज लगभग 1.33 MB टेक्स्ट बन जाती है। 10–20 KB से बड़ी इमेज के लिए, उन्हें उचित कैशिंग के साथ अलग फ़ाइलों के रूप में परोसना अधिक कुशल है।
क्या Base64 एन्कोडिंग इमेज गुणवत्ता कम करती है?
नहीं। Base64 एक हानिरहित एन्कोडिंग है — यह सामग्री को बदले बिना बाइनरी डेटा को टेक्स्ट में बदलती है। डीकोड किया गया डेटा मूल फ़ाइल से बाइट-दर-बाइट समान होता है। कोई भी गुणवत्ता हानि इमेज फ़ॉर्मेट (जैसे JPEG संपीड़न) से आएगी, Base64 एन्कोडिंग से नहीं।
Base64-एन्कोडेड आउटपुट मूल इमेज से बड़ा क्यों होता है?
Base64, बाइनरी डेटा के 3 बाइट को 4 ASCII वर्णों में दर्शाता है, जिससे आकार 33% बढ़ता है। एक data URI में एक उपसर्ग (जैसे data:image/png;base64,) भी जुड़ता है जो लगभग 25-30 वर्ण का होता है। छोटी इमेज (2-5 KB से कम) के लिए, यह ओवरहेड एक HTTP अनुरोध समाप्त करने से संतुलित होता है। बड़ी इमेज के लिए, आकार दंड बाहरी फ़ाइलों को अधिक कुशल बनाता है।
क्या मैं CSS background-image में Base64 इमेज उपयोग कर सकता हूँ?
हाँ। data URI को url() फ़ंक्शन के मान के रूप में उपयोग करें: 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 भाग को base64.b64decode() से डीकोड करें, और बाइट को फ़ाइल में लिखें। आप इस साइट पर Base64 Image Decoder टूल भी उपयोग कर सकते हैं।
क्या मुझे अपनी वेबसाइट की सभी इमेज Base64-एन्कोड करनी चाहिए?
नहीं। Base64 इनलाइनिंग छोटी इमेज (आइकन, लोगो, 1x1 पिक्सेल) के लिए लाभदायक है जहाँ HTTP अनुरोध का ओवरहेड 33% आकार दंड से अधिक है। बड़ी इमेज के लिए, उचित कैश हेडर के साथ अलग फ़ाइलें उपयोग करें — ब्राउज़र उन्हें स्वतंत्र रूप से कैश कर सकता है और समानांतर में लोड कर सकता है। एक सामान्य सीमा 2-8 KB है: इस आकार से कम इमेज इनलाइनिंग से लाभान्वित होती हैं, जबकि बड़ी इमेज बाहरी फ़ाइलों के रूप में परोसी जानी चाहिए।