justyourdevImage to Base64
Convert an image into a Base64 data URI, privately.
- 100% Free
- No Sign Up
- Works in Your Browser
Image to Base64
Turn an image into a data URI
More Developer Tools
View all tools- Base64 encode/decodeEncode and decode Base64 text
- URL encode/decodePercent-encode and decode URLs
- HTML entity encoderEscape and unescape HTML entities
- JWT decoderDecode a JSON Web Token
- JSON escape/unescapeEscape text for a JSON string
- JSON formatterPretty-print and indent JSON
- UUID generatorGenerate random v4 or time-ordered v7 UUIDs
- Timestamp converterConvert Unix epoch time to dates
- Regex testerTest regular expressions live
Every everyday developer tool, right in your browser.
No installs. No uploads. No signup.
Browse all 36 tools- Developer tools
- 36
- Cheat sheets
- 10
- Bytes uploaded
- 0
How to use the image to Base64
Three steps, all in your browser.
- 1
Choose an image
Pick a file from your device. It's read locally, never uploaded.
- 2
Choose the direction
Encode or decode. Errors point at what's wrong with the input.
- 3
Copy the result
Copy the output in one click. Nothing is saved or sent anywhere.
Image to Base64: what to know
Image to Base64 reads an image file on your device and encodes it as a Base64 data URI, such as data:image/png;base64,iVBOR..., ready to paste into HTML, CSS, JSON or Markdown. Common web formats work, including PNG, JPEG, GIF, WebP and SVG, and the file's own type is used in the data URI.
A data URI embeds the file in the page, which saves an HTTP request. That helps for tiny images such as icons, placeholders and email graphics, but for anything larger it's a poor trade: Base64 adds about 33% to the size, the image can't be cached separately, and it delays the HTML or CSS that contains it.
The file is read by your browser with the FileReader API and never uploaded. For SVG, a URL-encoded data URI (rather than Base64) is often smaller, since SVG is already text.
Popular uses
- Inlining small icons in CSS
- Embedding images in HTML email templates
- Putting an image into a JSON payload or test fixture
- Creating self-contained HTML files
Tips for the best result
- Keep inlined images small, a few kilobytes at most.
- Compress or resize the image before encoding: the data URI is only as small as the file.
- Some email clients block data URI images; test in the clients your audience uses.
Read how JustYourDev works and our privacy details. Code, data and files you use here are processed in your browser and are never sent to our server.