Image to Base64 Converter
Turn an image into a Base64 Data URI you can paste straight into HTML or CSS, without uploading it anywhere. The image is read in your browser and encoded from its original bytes, so the Data URI decodes back to the exact same file. You get the full data URI plus a ready img tag and a CSS background rule, with the encoded size shown so you can judge whether inlining is worth it.
How to convert an image to Base64
- Drop an image in, or click to browse. It stays in your browser.
- Copy the Base64 Data URI, the img tag, or the CSS background rule.
- Paste it into your HTML or stylesheet. No file hosting needed.
Examples
Inline a small icon in CSS
icon.png (a 1 KB icon)
background-image: url("data:image/png;base64,iVBORw0KGgo...");Frequently asked questions
Is my image uploaded anywhere?
No. The image is read and encoded entirely in your browser, so it never leaves your device. Nothing is sent to a server, which keeps private images private.
Why is the Base64 string larger than my image?
Base64 represents every 3 bytes with 4 text characters, so the encoded string is about 33 percent larger than the original file. That overhead is the trade-off for embedding the image as text.
When should I inline an image as Base64?
Inlining suits tiny, frequently used assets like icons and small backgrounds, where it saves an HTTP request. For larger images it bloats your HTML or CSS and hurts caching, so a normal file URL is usually better.
Does converting change my image quality?
No. This tool encodes the original file bytes without re-compressing or resizing, so decoding the Data URI gives back a byte-for-byte identical image with the same quality.
How do I use the Data URI in HTML or CSS?
Paste the data: string into an img src attribute, or into a CSS url() such as background-image. This tool generates both snippets for you, ready to copy.
Related tools
Image Converter
Convert images between PNG, JPEG, and WebP in your browser. Pick a background to flatten transparency, set quality, and download. Nothing is uploaded.
Image Compressor
Compress images in your browser. Drag a quality slider with a live size preview, or compress to a target file size automatically. Nothing is uploaded.
Image Metadata Viewer
View an image's EXIF and metadata in your browser: camera make and model, dimensions, format, orientation, and whether GPS location is embedded. Private.
Add Border to Image
Add a colored border or frame around an image, with adjustable width and color. Live preview, runs in your browser, nothing uploaded.
APNG Detector
Check whether a PNG file is an animated PNG (APNG) in your browser. See the frame count, loop count, and dimensions read straight from the file. Private.
Blur Image
Blur a whole image or drag a box to blur a face, name, or address. Adjustable blur strength, live preview, runs in your browser. Nothing is uploaded.