Loading…
Convert images to Base64 encoded strings online for free. Use for image files only; for text use base64. Input: image file ≤10MB. Returns Base64 data URI for HTML/CSS/JS. Generate Base64 data URIs for embedding images directly in HTML, CSS, and JavaScript code.
Base64 Image Converter is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Press ? for keyboard shortcuts
Converts images to Base64 encoding with drag-and-drop support, offering three output modes: data URI (for HTML src), raw Base64, and base64url (URL-safe). Supports resizing before encoding, batch mode for multiple images, and a decode-back mode that converts Base64 strings back to viewable images.
Embedding images directly in HTML, CSS, or JSON avoids extra HTTP requests but requires Base64 conversion. This tool makes it easy to generate the right format for each context and even resize images before encoding to keep the data URI small.
This tool is part of the DevStackIO platform — a collection of free online developer tools from DevStackIO. Browse more free developer resources on DevStackIO.
Frontend developers inlining small images in HTML/CSS, mobile app developers embedding assets in JSON, and API developers encoding image data in responses.
Drag and drop an image or click to browse and upload
Select output mode: Data URI (data:image/...), Raw Base64 (just the encoded string), or Base64url (URL-safe variant)
Optionally enable resize before encode and set max width/height to reduce the encoded output size
In batch mode, upload multiple images and see each result with a copy button
Switch to decode-back mode, paste a Base64 string, and view the decoded image preview
Copy the encoded output to clipboard with the copy button
Input: 16x16 favicon.png. Output (Data URI mode): 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...'Input: Resize a 4000x3000 photo to 200px wide before encode. Output: ~4KB base64url string instead of ~4MB raw.What is base64url vs Base64?
base64url uses - instead of + and _ instead of / and omits = padding, making it URL-safe.
Can I decode a data URI back to an image?
Yes, use decode-back mode and paste the full data URI string.
Is there a size limit for uploads?
Very large images (>50MB) may time out; resize first for such files.
What file formats are supported?
JPEG, PNG, GIF, WebP, SVG, BMP, and ICO.
Authoritative specifications, standards, and in-depth reading for Base64 Image Converter.
Click or drop images here
PNG, JPG, GIF, WebP, SVG, BMP, ICO · Max 10MB
Free online Base64 encoder and decoder with URL-safe mode. Use as default for text; for split encode-only/decode-only URLs use base64-encoder/base64-decoder (aliases), for image files use image-to-base64. Input: text ≤10MB. Returns Base64 string or decoded text + error location. Convert instantly in your browser.
Free online URL encoder and decoder for query strings and components. Private client-side conversion.
Encode/decode HTML entities (& < >). Use for HTML text; for URLs use url-encoder. Input: text ≤10MB. Returns encoded/decoded text. 100% client-side.
Convert text to binary and back. Use for binary strings; for other bases use base-converter. Input: text ≤10MB. Returns 0/1 string or decoded text. 100% client-side.
Convert text to hex and back. Use for hex encoding; for hashes use hash-generator. Input: text ≤10MB. Returns hex string or decoded text. 100% client-side.
Escape/unescape JS strings. Use for code literals; for JSON strings use json-escaper. Input: text ≤10MB. Returns escaped text. 100% client-side.
Translate text to Morse code and back. Use for learning or signaling. Input: text ≤10MB. Returns dots/dashes or decoded text. 100% client-side.
Minify JS for production or beautify minified JS for debugging. Use for JS only; for JSON use json-formatter, for CSS use css-formatter. Input: JS text ≤10MB. Returns minified or beautified JS or syntax error. 100% client-side.