Image to Base64
Free image to Base64 converter: get a data URI, raw Base64, an HTML img tag or CSS background for PNG, JPG, GIF, WebP, SVG and more. Nothing is uploaded.
How to use Image to Base64
- 1Drop an image onto the page or choose one from your device.
- 2Pick the format you need: Data URI, Base64 only, HTML img or CSS background.
- 3Copy it or download it as a text file.
What makes it better
- Data URI, raw Base64, HTML <img> and CSS background outputs
- PNG, JPG, GIF, WebP, SVG, AVIF, BMP and ICO
- Preview plus original and Base64 sizes
- Warns when the result is over about 1 MB
- Image never leaves your device
About Image to Base64
Image to Base64 reads an image file in your browser and gives you four ready-to-paste forms: a full data URI, the Base64 on its own, an HTML img tag and a CSS background-image rule. It shows the original and encoded sizes and warns you when the result is large enough to slow a page down.
Common uses
- Embed a small icon or logo directly in an HTML email or a single-file page.
- Inline a tiny background image in CSS to save one network request.
- Put an image into a JSON payload or API request that only accepts text.
- Store a small placeholder image in a config or a test fixture.
Example
Input
pixel.png (a 1 × 1 pixel PNG, 70 bytes)
Result
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==
Good to know
- Base64 makes an image about 33% larger, and an inlined image cannot be cached separately from the page. It works best for files of a few kilobytes.
- Data URIs of about 1 MB or more can slow page loads and are rejected by some email clients and APIs.
- Files over 25 MB are not accepted. Only image files are converted; other file types are refused.
Image to Base64 FAQ
How do I convert an image to Base64?
Choose or drop an image. The page reads it locally and shows the Base64 data URI at once. Switch the output tab to get just the Base64, an HTML img tag or a CSS background-image rule.
What is the difference between a data URI and plain Base64?
A data URI adds a prefix such as data:image/png;base64, that tells the browser the file type, so it can be used directly as an image source. Plain Base64 is only the encoded bytes, which APIs and databases often want.
Which image formats work?
PNG, JPG, GIF, WebP, SVG, AVIF, BMP and ICO. Anything else is rejected with a message. The format is taken from the file extension and the type your browser reports.
Why is my Base64 so long?
Base64 stores 3 bytes in 4 characters, so it is a third longer than the file. Photos run to hundreds of thousands of characters, which is why this approach suits only small images.
How can I make the Base64 smaller?
Shrink the image first: compress it or convert it to JPG or WebP, then encode the smaller file. The links below open the Image Tools that do this.