Base64 Image
Convert images to Base64 Data URIs and back, with drag-and-drop and preview
Click or drag an image here to upload
PNG / JPG / GIF / SVG / WebP / BMP supported
{{ imageInfo.name }} · {{ imageInfo.sizeText }}
Click to choose another image
Length: {{ base64Output.length }} chars
MIME: {{ imageInfo.mime }}
Chars: {{ base64Input.length }}
{{ errorMsg }}
{{ decodedImageInfo.mime }} · {{ decodedImageInfo.sizeText }}
About Base64 Image Conversion
Base64 image conversion turns an image file into a Base64-encoded Data URI string. A Data URI embeds image data directly inside HTML or CSS, in the format data:image/png;base64,....
Common uses for Base64 images include reducing HTTP requests (inlining small images into HTML), embedding CSS background images, inserting images into emails, and referencing images in Markdown.
This tool works both ways: convert an image file to a Base64 Data URI, or turn a Base64 Data URI back into an image and download it. Everything runs in your browser.
FAQ
Q: Does the image get larger after Base64 conversion?
A: Yes. Base64 increases the data size by about 33%. For large images, use inlining with caution as it can slow down page loading.
Q: Which image formats are supported?
A: PNG, JPEG, GIF, SVG, WebP, BMP, ICO and other common formats. The MIME type is detected automatically on output.
Q: How do I use a Base64 image in CSS?
A: Use
background-image: url(data:image/png;base64,...). This tool provides a "Copy CSS background" button that generates ready-to-paste CSS code in one click.