Use the tool
Open Convert to Base64
Convert a supported image to JPG output, then copy its raw Base64 or full data URL.
Base64 images
Use Base64 Images Without Breaking the File
Encode small images as Base64, add the correct data URL prefix when needed, and avoid oversized CSS, HTML, or JSON payloads.
Quick answer
What you need to know
Base64 turns output file bytes into text and makes the raw data about one-third larger. Choose the JPEGConvert route that matches the format you want because these pages may convert or re-encode the uploaded image before producing Base64; use a normal file URL for large or reused images.
- Best for
- Developers and technical users embedding or transporting image data in CSS, HTML, JSON, forms, or APIs.
- Start with
- Convert to Base64
Do this first
Encode and Verify an Image
Choose the output format first, then copy the right Base64 form and decode-test the result.
- 1
Prepare the source image
Resize or compress it first and choose JPG, PNG, WebP, GIF, or SVG based on the content.
- 2
Choose the matching route
Use JPG to Base64, PNG to Base64, or another named page for the output format you need; the general Convert to Base64 page targets JPG.
- 3
Choose data URL or raw Base64
Copy a full data URL for CSS or HTML, or switch to raw Base64 when an API asks for the encoded characters only.
- 4
Decode one test
Decode the final stored or transmitted value and compare its format, dimensions, and appearance with the converter output.
01
Know What Base64 Changes
Base64 itself changes binary bytes into text characters. It does not compress an image or improve its quality.
- The encoded text is usually about one-third larger than the original binary data before other compression.
- Decoding complete Base64 recovers the bytes that were encoded.
- A Base64 string needs separate format information unless the surrounding field already defines it.
02
Know What JPEGConvert Encodes
JPEGConvert image-to-Base64 pages call an image conversion route before returning the text, so the encoded bytes may not match the original upload byte for byte.
- Use a format-specific page when the output must be JPG, PNG, WebP, GIF, SVG, or another named format.
- The general Convert to Base64 page produces JPG output.
- Compare decoded output with the converter result, not with the original file bytes.
03
Use the Right String in the Destination
For Base64 image embeds, include the matching MIME type and ;base64 marker in the data URL. Many APIs expect raw Base64 without that prefix instead.
- A PNG data URL starts with data:image/png;base64, before the encoded text.
- Use the MIME type returned by the converter and do not guess from the old filename.
- Use file URLs for large or reused images, and check request or field-size limits for long strings.
04
Check SVG Data URLs in CSS
An SVG background can contain Base64 text or URL-encoded XML. Check which form you have before changing the prefix or trying to decode it.
- A Base64 SVG starts with data:image/svg+xml;base64, followed by encoded text. In CSS, the complete data URL goes inside url("...").
- A URL-encoded SVG can start with data:image/svg+xml,%3Csvg. Without ;base64, the content after the comma is not Base64.
- In a URL-encoded SVG, a color such as #2563eb needs %23 in place of # so it remains part of the image data.
- Use Base64 to SVG to recover the source from either form. Keep the original string, inspect the decoded markup, and test your edit in the page where it will appear.
05
Find the Cause of a Blank SVG Background
A successful decode only confirms that the encoded file can be recovered. A blank image can still come from the SVG or the way the page displays it.
- Check the element size and background-size in your CSS, then inspect the SVG width, height, and viewBox.
- Try a dark background if the SVG artwork is white or transparent.
- An SVG used as an image has restrictions on scripts and external resources. Include the resources the image needs instead of assuming page styles or fonts will carry over.
- If the decoded file is PNG or JPG, changing the data URL to image/svg+xml will not create vector paths. Decode the actual image format first.
Quick questions
FAQ
Does Base64 make an image smaller?
No. Base64 usually makes the raw data about one-third larger. Compress or resize the image before encoding if size matters.
What is the difference between raw Base64 and a data URL?
Raw Base64 is only the encoded text. A data URL adds a prefix such as data:image/png;base64, so a browser knows the media type and encoding.
Why does my Base64 image not display?
Common causes include a missing or wrong MIME type, a truncated string, added spaces, unsafe JSON escaping, or an API that expects raw Base64 instead of a data URL.
Can Base64 be converted back into the original image?
Base64 can recover the bytes it contains. JPEGConvert may convert or re-encode the upload first, so decoding restores that output image, not necessarily the original upload byte for byte.
Does an SVG data URL have to use Base64?
No. SVG is XML text and can be embedded as a URL-encoded data URL as well. Use ;base64 only when the payload is Base64. For a normal external SVG file, a file URL is usually simpler to maintain.
Remember this
The short version
- Base64 represents image bytes as text; it is not image compression.
- Choose the matching JPEGConvert format route and the correct data URL or raw output.
- Prefer normal file URLs for large or repeatedly used images.
- For SVG backgrounds, check both the data URL syntax and the decoded artwork before changing your CSS.
Ready to work
Open the tool you need
Choose the tool for the change your file needs.
Convert to Base64 Convert a supported image to JPG output, then copy its raw Base64 or full data URL. Open tool Base64 Decode Image Decode a test string and confirm that the resulting image opens correctly. Open tool Base64 to SVG Recover SVG markup from a CSS data URL or API value, inspect it, and save the vector file. Open tool
- Convert JPG to Base64 — Use the JPG-specific route when JPG is the output format you need.