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 में बदलता है — कोई अपलोड नहीं, कोई सर्वर नहीं, कोई खाता नहीं।
Base64 इमेज एन्कोडिंग के उपयोग के मामले
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 में बदलने का तरीका:
// 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..."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}'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')}`
}# 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)"