Image to Base64: Convert JPG, PNG & WebP to Base64 Online
Image to Base64 converter online: turn JPG, PNG, and WebP into data URLs for HTML, CSS, or JSON. Drag-and-drop to convert instantly.
Updated 2026-08-16
Related Tools
Base64 Encoder/Decoder: Encode & Decode Text Online
Text to Binary Converter: Encode & Decode Binary Online
Image Converter: HEIC, JPG, PNG, WebP & AVIF Online
ASCII Converter: Encode, Decode & View ASCII Table
Charset Detector: Detect File Encoding & Fix Garbled Text
Hex to Text Converter: Encode & Decode Hexadecimal Online
Features
- Convert images to Base64 data URIs: JPG, PNG, WebP, GIF, SVG, and more
- Drag and drop images directly into the browser
- Copy Base64 string to clipboard with one click
- Save the Base64 data as a .txt file
- Preview the opened image before conversion
- See the original file size and the Base64 string length
- Decode Base64 strings back into savable images
- No file size limits on input files
- Perfect for embedding images in HTML <img> tags, CSS background-url, or JSON payloads
How to Use
- 1Open an image by clicking the file area or dragging and dropping a file.
- 2View the image preview and file details (name, size, type).
- 3Copy the generated Base64 data URI using the copy button.
- 4Paste the Base64 string directly into HTML: <img src="data:image/png;base64,..." />
- 5Use in CSS: background-image: url('data:image/png;base64,...');
- 6Use in JSON APIs to send image data as a string payload.
- 7Decode: paste a Base64 string into the decode area to preview and save the image.
- 8Convert multiple images one at a time; each conversion is instant.
- 9Save the Base64 output as a .txt file for later use.
- 10Reduce image dimensions first in our image resizer tool to get shorter Base64 strings.
Frequently Asked Questions
What is Base64 encoding?
Base64 is a binary-to-text encoding that represents binary data in an ASCII string format. It's commonly used to embed images directly into HTML, CSS, and JSON without separate file requests.
How do I embed an image in HTML using Base64?
Use the data URI as the src attribute: <img src="data:image/png;base64,YOUR_BASE64_STRING" alt="description" />. Copy the full string from this tool and paste it.
Does Base64 increase file size?
Yes, Base64 encoding increases the file size by approximately 33%. Use Base64 embedding for small images (icons, logos) where the extra HTTP request overhead outweighs the size increase.
What image formats are supported?
All common formats: JPG, PNG, WebP, GIF, SVG, BMP, ICO, and AVIF. The output data URI will automatically include the correct MIME type.
Is there a file size limit?
No limit: the conversion runs entirely in your browser using JavaScript's FileReader API. However, very large files produce long Base64 strings that may be impractical to embed.
Can I decode Base64 back to an image?
Yes. Paste a Base64 data URI into the decode area to preview the image and save it as the original format.
How does Base64 encoding work, and why is the string longer?
Each 3 bytes of binary data (24 bits) is split into four 6-bit groups, and each group maps to one of 64 characters, hence the 4/3 size ratio, about 33% larger. When the data length is not a multiple of 3, = padding is added. So a 1 MB image becomes roughly a 1.33 MB Base64 string.
What's the difference between a Base64 string and a Base64 URL?
The usable form is the data URI: data:image/png;base64,<string>; when people say 'Base64 URL' they usually mean this MIME-prefixed data URI; the bare string has no prefix and won't render. URL-safe Base64 (with - and _ instead of + and /) is a separate variant for query parameters, not for embedding images.
When should I use Base64 vs a file URL?
Use Base64 for small, inline images that you want to embed directly (favicons, tiny icons, email signatures). Use file URLs for larger images to avoid inflating HTML/CSS/JSON size.
What is a data URI?
A data URI is a URL that starts with 'data:' followed by the MIME type and the actual data encoded as Base64. It allows embedding data directly in web documents without external resources.
Can I convert video or audio to Base64?
This tool is designed for images. For other file types, use our general Base64 Encode tool which supports any text or binary data.
Why doesn't my Base64 image display in HTML or CSS?
The most common causes: the string was truncated (email clients and some editors wrap or cut long lines), the data:image/...;base64, prefix is missing or was split by a line break, or the quotes conflict with your attribute quotes. Verify the string is intact by pasting it back into this tool's decode area; if it previews, the data is complete and the problem is in how it was pasted. In HTML, keep the entire data URI on one line inside the attribute.
Are there any issues with SVG files?
Yes, one worth knowing: SVG is XML text, and browsers generally prefer URL-encoded SVG data URIs (data:image/svg+xml,... with %3C for <) over Base64 versions, because some environments apply extra decoding to the base64 payload. The Base64 output from this tool works in all major browsers, but if you hit an edge case, encode the SVG with encodeURIComponent instead; it also produces a shorter string since SVG text compresses better as percent-encoding.
I sent the Base64 string to someone and they can't see the image; how do I share it correctly?
A raw Base64 string is not an image file; it only renders inside a data URI or after being decoded. Sending the bare text in chat or email leaves the receiver with nothing to open. Correct ways to share: send the image file itself, embed the data URI in an HTML page or email (mind client truncation of long lines), or send the .txt file this tool's Save button produces and tell the receiver to paste it into the decode area to restore the image.