Base64 Image Encoder / Decoder
Images ko HTML aur CSS snippets wale Base64 Data URI mein badlein, ya Data URI ko downloadable image mein decode karein.
Base64 Image Encoder / Decoder poori tarah aapke browser mein chalta hai. Jo images aap drop karte hain aur Data URIs aap paste karte hain woh aapke device par hi process hote hain aur kabhi ArrayKit par upload nahi hote.
Base64 Encoder / Decoder kholein
Base64 Image Encoder / Decoder ke baare mein
Base64 Image Encoder kisi bhi image ko ek Base64 Data URI mein badal deta hai jise aap seedhe HTML ya CSS mein paste kar sakte hain. PNG, JPEG, WebP, SVG ya GIF drop karein aur yeh turant Data URI ke saath production-ready snippets dikhata hai — editable alt text wala <img> tag aur ek CSS background-image rule — har ek ke saath one-click copy. Yeh MIME type, file size, pixel dimensions aur string ki length bhi batata hai, taaki aapko theek-theek pata rahe ki aap kya embed kar rahe hain. Decode mode par jaakar ek Data URI paste karein, image ka preview dekhein aur use sahi file extension ke saath download karein. Yeh front-end developers, email aur template authors, aur un sabhi ke liye banaya gaya hai jo ek request bachane ke liye chhote icons inline karte hain. Sab kuch aapke browser mein locally chalta hai, isliye aapki images aapke device par hi rehti hain.
Features
- Drag-and-drop ya click karke PNG, JPEG, WebP, SVG aur GIF ko Base64 Data URI mein encode karein
- Raw Data URI, ready HTML <img> tag aur CSS background-image rule ki one-click copy
- Editable alt text jo accessibility ke liye generate hue <img> snippet mein seedha chala jaata hai
- MIME type, file size, pixel dimensions aur Data URI ki length ek nazar mein dikhata hai
- Decode mode Data URI paste karke image ka preview dikhata hai aur sahi extension ke saath download karta hai
- Jab koi image itni badi ho ki use Base64 ke roop mein efficiently inline na kiya ja sake to warning deta hai
- Raster photos ke saath-saath SVG aur GIF ko bhi handle karta hai, sensible download extensions ke saath
- Poori tarah aapke browser mein chalta hai, isliye images kabhi kisi server par upload nahi hoti
Base64 Image Encoder / Decoder kaise use karein
- Image → Base64 tab selected rakhein aur drop zone mein ek image drop karein
- Base64 Data URI, HTML <img> tag ya CSS background-image rule copy karein
- Optionally alt text type karein taaki woh <img> snippet mein shaamil ho jaaye
- Base64 → Image par switch karein, ek Data URI paste karein, phir image ka preview dekhein aur download karein
Example
Input
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…
Output
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />
Ek PNG ek inline <img> tag ban jaata hai jo bina kisi extra network request ke load hota hai.
Common errors aur troubleshooting
- Data URI paste karne par 'The Data URI payload is not valid Base64.' dikhta hai. — data:image/… se shuru hone aur ';base64,' sahit poori string copy karein, aur aapke editor dwara jodi gayi extra quotes ya line breaks hata dein.
- Decode ki gayi image preview nahi hoti. — Check karein ki MIME type data se match karta hai — image/jpeg label wala PNG content render nahi hoga. Sahi Data URI paane ke liye original file ko dobara encode karein.
- Image inline karne ke baad meri HTML ya CSS file bahut badi ho gayi. — Base64 lagbhag 33% overhead jodta hai aur inline images alag se cache nahi hoti. Sirf chhote icons inline karein aur badi images ko normal files ki tarah link karein.
- Kisi aur tool ka SVG Data URI alag dikhta hai. — Kuch tools SVG ko Base64 ke bajaye percent-encode karte hain. Yeh encoder hamesha Base64 use karta hai; dono valid Data URIs hain par byte-dar-byte interchangeable nahi hain.
Aksar pooche jaane wale sawaal
- Base64 image Data URI kya hai?
- Data URI ek image ko seedhe data:image/png;base64,XXXX jaisi string mein embed kar deta hai. Image ke bytes Base64 mein encode hote hain, isliye aap poori image ko bina alag file ya request ke HTML ke src ya CSS ke url() mein daal sakte hain.
- Main kaun-kaun se image formats encode kar sakta hoon?
- Koi bhi image jise aapka browser padh sake — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF aur ICO chalte hain. Decoder Data URI se MIME type padhta hai aur usse match karta download extension deta hai.
- Kya mujhe images ko Base64 ke roop mein inline karna chahiye?
- Inline karna chhote, baar-baar use hone wale assets jaise icons ya email images ke liye theek hai, jahan ek request bachana madad karta hai. Badi images ke liye yeh aam taur par nuksandeh hai, kyunki Base64 size mein lagbhag ek-tihaai jodta hai aur data apne aap cache nahi ho sakta.
- Kya main Data URI ko wapas image file mein decode kar sakta hoon?
- Haan. Base64 → Image par switch karein, data:image/…;base64, string paste karein, aur tool image ka preview dikhakar use sahi file extension ke saath download karne deta hai.
- Kya encode karte samay meri images upload hoti hain?
- Nahi. Encoder browser ke FileReader se file padhta hai aur Data URI aapke device par banata hai. ArrayKit ya kisi server ko kuch nahi bheja jaata.
- Base64 string meri image se badi kyun hai?
- Base64 teen bytes ko chaar characters se dikhata hai, isliye encode kiya gaya text original binary se lagbhag 33% bada hota hai, saath mein chhota data:…;base64, prefix bhi. Yeh overhead normal aur expected hai.
Related tools
- Base64 Encode / Decode — UTF-8 safe Base64 encoding aur decoding.
- Image Format Converter — Images ko PNG, JPEG aur WebP ke beech poori tarah aapke browser mein convert karein.
- Image Optimizer — Images ko re-encode aur chhota karein (JPEG/WebP/PNG), optional resize ke saath.
- SVG Optimizer — SVG minify karein: comments, metadata aur editor cruft hatayein, aur whitespace collapse karein.
- EXIF Viewer aur Remover — Photos se EXIF metadata (GPS samet) dekhein aur hatayein; kuch bhi upload nahi hota.
- URL Encode / Decode — URL components ko encode aur decode karein.
- QR Code Generator — Text ya URL se ek QR code generate karein; PNG ya SVG ke roop mein download karein.
Saare ArrayKit tools