How to Embed a Small Image as Base64
Embedding avoids an extra file request, but it is only worth it for small images. Here is the trade-off.
What is the Image to Base64 Converter?
Upload an image and get its Base64 representation, either as a full data URL ready to paste into HTML or CSS, or as raw Base64 text. Encoding happens locally in your browser. Keep in mind that Base64 text is roughly a third larger than the original file, so it suits small icons better than large photos.
How to use it
- Upload an image
- Choose Data URL or raw Base64
- Copy the encoded text
Worked example
With Data URL selected, a small icon becomes a single text string starting with data:image that can be pasted directly into an img tag or stylesheet.
When should I use Base64 instead of a file?
For tiny icons and one-off embeds where a separate file is more hassle than the extra text size.
Frequently asked questions
What is a data URL?
It is a Base64 string prefixed with the image type, so a browser can render it without a separate file.
Why is the text so long?
Base64 uses text characters to represent binary data, which expands the size by about a third.