What is a Base64 image string?
A Base64 image is a text representation of binary image data, commonly used to embed images directly in HTML, CSS, or JSON without linking to a file.
Image to Base64 Converter Free Online - Data URL
Convert images to Base64 strings or data URLs online. Upload PNG, JPG, or SVG and copy the encoded string for use in HTML, CSS, and code.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
About this tool
Base64 embedding eliminates the HTTP request for small images - useful for icons, placeholders, and email HTML where external image requests are blocked by default. The trade-off: Base64 increases file size by ~33%, so it's best reserved for small images under 5KB.
Upload any image and get a Base64 encoded string you can paste directly into HTML img src attributes, CSS background-image properties, or JSON payloads - embedding the image without a separate server request.
How to Use Image to Base64 Converter
Upload Image
Select a PNG, JPG, GIF, SVG, or WebP file to encode.
Encode to Base64
The tool reads the file and generates the Base64 string instantly.
Copy String or Data URL
Copy the raw Base64 string or the full data URL for HTML embedding.
Preview Image
Verify the encoded image matches your original upload.
Common Workflows
CSS Icon Embedding
Embed small icons in CSS without a separate image file.
Email HTML Templates
Include images in email HTML templates where external image requests are blocked.
JSON API Payloads
Embed images in JSON API payloads.
Self-Contained HTML
Create self-contained HTML files with embedded assets.
Offline Testing
Test image display in environments without file server access.
Markdown Inline Images
Generate data URLs for Markdown editors that accept inline images.
Best For
- Converts images to Base64 data URLs ready for use in HTML src, CSS url(), and JSON fields.
- Supports PNG, JPG, SVG, GIF, and WebP - outputs the correct MIME type prefix automatically.
- Runs entirely in your browser; no upload to any server.
Examples
Anatomy of the Data URL output
Uploaded File
A 1×1 pixel PNG (68 bytes)Data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=The Data URL always follows this structure: data: + the file's MIME type (auto-detected from the upload) + ;base64, + the encoded data. Even this tiny 68-byte PNG produces a 92-character Base64 string - close to the ~33% size increase this encoding typically adds.
Base64 String Only vs the full Data URL
Data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=Base64 String Only
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=The "Base64 String Only" button copies everything after the comma - just the encoded data, without the data:image/png;base64, prefix. Use the full Data URL for an img src or CSS url(); use the string alone if you're building the data: prefix yourself.
Using the copied Data URL as a CSS background
Copied Data URL
data:image/png;base64,iVBORw0KGgo... (copied from the Data URL field)CSS
background-image: url("data:image/png;base64,iVBORw0KGgo...");There's no dedicated CSS copy button - paste the Data URL you already copied inside a url("...") wrapper yourself. The tool only provides one-click copies for the raw Data URL, the Base64 string alone, and an HTML img tag.
Use Cases
Embedding a small icon or logo directly in a stylesheet
Skip a separate image request for a small icon by pasting its Data URL into a CSS url() declaration.
Building a self-contained HTML email
Encode a logo or icon as Base64 so it displays even when the email client blocks external image requests by default.
Sending an image inside a JSON API payload
Use the Base64 String Only output as a JSON string value when an API expects image data embedded in the request body rather than as a separate file upload.
Confirming a Base64 string decodes back to the original image
Use the live preview to visually confirm the encoded string round-trips correctly before pasting it somewhere else.
Common Mistakes
Problem
Expecting a dedicated CSS or JSON copy button
Solution
There are only three copy options - Data URL, Base64 String Only, and an HTML img tag. Using the string in CSS (background-image: url(...)) or JSON means wrapping the copied value yourself.
Problem
Encoding a large photo and expecting it to load faster
Solution
Base64 encoding adds roughly a third to the file size and can't be cached separately from the page - it helps small icons avoid an extra request, but it works against you on large images.
Problem
Assuming there's a file-size limit that will stop a huge upload
Solution
The tool doesn't enforce a maximum file size - encoding a very large image will still work, but the resulting string (and your browser tab) may become sluggish to handle.
Problem
Trying to decode a Base64 string back into a downloadable image here
Solution
This tool only encodes image files into Base64 - it doesn't accept a Base64 string and convert it back into an image file.
Tips & Best Practices
Reach for compression before encoding a photo-sized image
Since Base64 adds about 33% to the file size, compressing a larger image first keeps the resulting string smaller and more practical to embed.
Use the Base64 String Only output when building your own data URI
If you need to construct the data: prefix yourself - for example, to override the detected MIME type - copy the Base64 String Only output rather than the full Data URL.
Check the live preview before copying
The tool renders the uploaded image back from its own encoded string - if the preview looks right, the encoding round-trips correctly for wherever you paste it next.
Limitations
No Base64-to-image conversion
The tool only encodes image files into Base64 - it doesn't decode a Base64 string back into a downloadable image file.
No enforced file-size limit
There's no maximum file size built in, so very large uploads are accepted but can produce unwieldy strings and slow the browser tab down.
No image compression or format conversion
The file is encoded exactly as uploaded - the tool doesn't resize, compress, or convert it to a different image format before encoding.
Only three output formats
Data URL, Base64 String Only, and an HTML img tag are the only one-click copy options - there's no dedicated CSS url() or JSON-wrapped output.
Comparisons
Base64-Embedded Image vs a Regular Image File
Both display the same image - the difference is where the data lives and how the browser handles it.
| Base64-Embedded (this tool's output) | Regular Image File (linked by URL) | |
|---|---|---|
| HTTP request | None - the image data is inline | One separate request per image |
| Caching | Cached only as part of the parent HTML/CSS file | Cached independently by the browser |
| File size impact | ~33% larger than the original binary | Original file size, unchanged |
| Best for | Small icons, email HTML, self-contained files | Larger images, anything reused across multiple pages |
Which should you use?
Base64 wins when avoiding a request matters more than caching - small icons, one-off assets, and email HTML. A regular file wins for anything larger or reused across pages, since the browser can cache it once instead of re-downloading it inside every page that embeds it.
FAQs
The most common question is whether Base64 images load slower. They load faster on the first request (one less HTTP round-trip) but increase the HTML/CSS file size, which slows the initial parse. The trade-off favors Base64 for small icons and against it for large images.
How do I use the Base64 string in HTML?
Use it as an img src: <img src="data:image/png;base64,..." />. This embeds the image directly in your HTML without a separate file request.
Are there size limits for Base64 encoding?
Base64 strings are about 33% larger than the original file. For large images this can slow page loads, so it is best used for small icons and logos.
Get more tools like this
Leave your email so we can prioritize similar tools and updates.
Trending Tools
Trending tools will appear as visitors explore the catalog.
Recently Used
Your recently visited tools will show up here.