PDFConvertersOnline.comHow to convert an image to Base64
- Choose a PNG, JPG, SVG, GIF, WebP or other image file.
- The tool instantly shows the data URL, the plain Base64 text, a CSS rule and an HTML tag.
- Press Copy next to the version you need and paste it into your code.
What Base64 does
Base64 writes binary data, like the bytes of a PNG, using only 64 safe characters: letters, digits, plus and slash. That lets an image travel inside places that only accept text, such as an HTML file, a stylesheet, a JSON response or a configuration file. A data URL adds a short header in front, for example data:image/png;base64,, so the browser knows what kind of file follows.
This converter encodes your original file exactly as it is. Nothing is re-compressed or resized, so decoding the text later gives back the identical file.
The four outputs
| Output | Where to use it |
|---|---|
| Data URL | Anywhere a URL is accepted: the src of an image, a link, JavaScript |
| Base64 only | APIs and JSON fields that expect the raw text and store the file type separately |
| CSS background | Small icons and patterns placed inside a stylesheet |
| HTML image tag | A ready-made <img> with width and height filled in |
When embedding makes sense
- Tiny images, such as icons, bullets or a small logo, where saving one extra network request is worth more than a few bytes.
- Self-contained files: a single HTML report or demo page that must work offline without an images folder.
- Test data and prototypes, where you want an image inside a unit test, a mock API response or a code sample.
When not to use Base64
Encoding always makes the data about 33% larger, because every 3 bytes become 4 characters. The tool shows the exact increase for your file. Beyond size, embedded images have other drawbacks:
- The browser can't cache the picture separately, so it is downloaded again with every page or stylesheet that contains it.
- A big data URL inside CSS delays the whole stylesheet, and with it the first paint of the page.
- Many email programs, Gmail among them, don't display data URL images in messages. For newsletters, host the image or attach it instead.
As a rule of thumb, keep embedding for images of a few kilobytes. For anything larger, first try making the file smaller with Compress Image or Resize Image, or simply link to the file. To go the other way, from text back to a picture, use Base64 to Image.
SVG files
SVG icons work well as data URLs. Base64 is the most reliable way to embed them, although plain URL-encoded SVG is often a little shorter.
More ways to use this tool
Frequently asked questions
Why is the Base64 text bigger than my image?
Base64 uses 4 characters for every 3 bytes, so the text is about one third larger than the file. The data URL header adds a few more characters.
Is my image uploaded to create the code?
No. The file is read and encoded by your browser, on your device. It never goes over the network.
Is there a size limit?
No fixed limit. Very large images produce millions of characters, which can make text editors slow; the tool warns you above 100 KB and offers a .txt download for long results.
Does the conversion change my image?
No. The exact bytes of your file are encoded, so the picture keeps its quality, transparency and any metadata it contains.
Can I use the result in an email?
Technically yes, but many email clients refuse to show data URL images. For email, linking to a hosted image or attaching it works far more reliably.