Image to Base64
Convert an image file to a Base64 string you can copy, with ready-made HTML and CSS snippets.
Image to Base64 encodes an image file as Base64 text, so it can be stored or sent as plain text, for example inside JSON, an HTML page or a CSS file. The string is created from the file's original bytes, so the image is not compressed again or changed. The tool shows the character count and also gives you an HTML img tag and a CSS background-image rule that contain the full image.
How to use Image to Base64
- 1
Open an image
Drop, choose or paste any image file. Small images such as icons work best.
- 2
Get the Base64 string
The string appears right away, with its length in characters and its approximate size.
- 3
Copy what you need
Click Copy Base64 for the bare string, or use Copy HTML or Copy CSS for a ready-made snippet.
- 4
Paste it into your code
Paste the string into your JSON, HTML, CSS or script.
What it does
- Byte-exact encoding
- The original file is encoded as it is, with no re-compression or quality change.
- Size information
- See the number of characters and the approximate size of the string before you use it.
- HTML and CSS snippets
- Copy an img tag or a background-image rule with the complete data URI included.
- Encoded locally
- The file is read and encoded in your browser and is never uploaded.
Questions
What is Base64 used for with images?
Base64 turns binary image data into plain text characters. Developers use it to place small images directly in HTML, CSS, JSON or email templates, so no separate image file has to be loaded.
Why is the Base64 string larger than the image file?
Base64 uses 4 text characters for every 3 bytes, so the result is about 33% larger. A 30 KB image becomes roughly 40 KB of text.
What is the difference between Base64 and a data URI?
Base64 is only the encoded text. A data URI adds a prefix such as data:image/png;base64, so browsers know the file type. This tool gives the bare string; Image to Data URI gives the full version.
Should I convert large images to Base64?
Usually not. Base64 works best for small images such as icons. Large photos make your HTML or CSS much heavier, and the browser cannot cache the image as a separate file.
Is my image changed during encoding?
No, the original bytes are encoded. The only exception is iPhone HEIC photos, which are converted to PNG first because most browsers cannot display HEIC.