Image to Base64
This converter turns any image file into a Base64 data URL — a single self-contained string beginning with data:image/…;base64, that embeds the entire file. It uses the browser's FileReader API (readAsDataURL), so the encoding happens on your device and the image is never uploaded. Drop or pick an image, confirm the live preview shows the right file, and copy the full string with one click. Data URLs shine wherever a separate file is awkward: small icons and logos inlined into HTML or CSS to save an HTTP request, images embedded in JSON payloads or email signatures, self-contained single-file documents, and quick prototypes. The trade-offs are real, though: Base64 encodes 3 bytes as 4 characters (about +33% size), the string can't be cached independently of the page, and it bloats your markup — so reserve it for assets up to a few tens of kilobytes and serve big photos as regular files.
Drag & drop an image here
or click to browseHow to use
- Drag an image onto the drop zone, or click (or press Enter) to browse — any image type your browser understands is accepted.
- Check the preview to confirm the right image was read; the full data URL appears beside it.
- Click Copy to grab the entire string in one go.
- Paste it into an img src, a CSS background-image: url(…), a JSON field, or anywhere a URL is expected. Use Clear to start over with another image.
Frequently asked questions
- Is my image uploaded?
- No. The file is read locally with the browser's FileReader API and the result stays on the page; nothing is sent to a server, and nothing is stored after you leave.
- Does converting change or compress the image?
- No. Base64 is a lossless re-encoding of the exact bytes — decoding the string yields a file identical to the original. It never shrinks anything; if you need a smaller result, resize or compress the image first, then convert the smaller file.
- Should I inline large images?
- Usually not. Base64 inflates size by about 33%, the data can't be cached separately from the document that contains it, and huge strings make HTML and CSS files painful to edit. Inline small, frequently reused assets like icons; serve photos as normal files.
- Which formats work?
- Anything your browser can read as an image — PNG, JPEG, GIF, WebP, SVG, AVIF, ICO, and more. The original MIME type is preserved in the data:image/…;base64, prefix, so the pasted URL renders exactly like the source file.
- Can I use the result in CSS or Markdown?
- Yes. In CSS, paste it into background-image: url(…); in Markdown, use it as the image target: . Keep in mind that some editors and linters cap very long lines, so extremely large data URLs may be unwieldy there.
Guides on this topic
Related tools
Data URI Parser & Decoder
Decode a data: URI to see its MIME type, encoding, size and decoded contents, in your browser.
Base64 Encoder / Decoder
Encode text to Base64 or decode Base64 back to text, instantly.
Lorem Picsum URL Builder
Build placeholder image URLs from picsum.photos — set dimensions, grayscale, blur, a seed for stable images, or a specific image ID.
QR Code Generator
Create custom QR codes from any text or URL and download them.
Image Compressor
Compress and resize JPEG, PNG, and WebP images in your browser.
Image Resize
Resize an image to any dimensions and export as PNG, JPEG, or WebP — all in your browser.