Image to Base64 Converter
Turn an image into a Base64-encoded data URI, ready to paste into CSS or HTML.
How to Convert an Image to Base64
- Click the upload area or drag in an image — JPG, PNG, WebP, GIF, and SVG are all accepted.
- The tool encodes the file and shows its stats: original size, Base64 size, and pixel dimensions.
- Switch between the "Data URI", "Raw Base64", "CSS background", and "HTML <img>" tabs to get the exact format you need.
- Click "Copy to Clipboard" to grab the text for pasting into your code.
Frequently Asked Questions
Why is the Base64 output larger than my original file?
Base64 encoding represents every 3 bytes of binary data as 4 text characters, which adds roughly 33% overhead. The Base64 Size stat reflects this - it will always be larger than the original file size.
What's the difference between Data URI and Raw Base64?
Data URI includes the full data:image/png;base64,... prefix that browsers and CSS need to recognize the encoded data as an image, while Raw Base64 is just the encoded characters on their own, useful if you're inserting the string into your own custom format.
Does this re-compress or resize my image?
No. The tool reads your file's raw bytes with FileReader and encodes them directly as Base64 - it doesn't pass the image through a canvas, so there's no re-encoding, resizing, or quality loss involved.
Will an animated GIF still animate after converting to Base64?
Yes. Since the original file bytes are encoded as-is rather than redrawn, an animated GIF's frames are preserved in the Base64 string and will still animate wherever the resulting data URI is used.
Is my image sent anywhere to be encoded?
No. The FileReader API reads and encodes the file entirely within your browser - nothing is uploaded to a server.