Image to Base64

Convert images to Base64 strings or Data URIs — one-click copy for HTML, CSS, or JSON

🔢

Drop an image here or click to upload

PNG, JPG, WebP, GIF, SVG, BMP, ICO

How to Use the Image to Base64 Converter

Converting images to Base64 is useful for embedding small images directly into HTML, CSS, or JSON files. Here's how to use this tool:

Step 1: Upload your image. Drag and drop any image into the upload area, or click to browse. All common formats are supported — PNG, JPG, WebP, GIF, SVG, BMP, ICO, and AVIF.

Step 2: Review the results. The tool displays the image dimensions, original file size, Base64 encoded size, total character count, and the MIME type. A visual size comparison shows the ~33% size increase from Base64 encoding.

Step 3: Choose your output format. Switch between tabs to get the format you need: Data URI for direct use in HTML/CSS, Base64 Only for the raw encoded string, CSS Background for a ready-to-use CSS property, or HTML img Tag for a complete image element.

Step 4: Copy or download. Click "Copy" to copy the output to your clipboard, or "Download .txt" to save it as a text file.

Example: For a small 16×16 favicon (1.2KB PNG), the Base64 output is about 1.6KB — perfect for embedding in an HTML <link> tag to avoid an extra HTTP request.

Frequently Asked Questions

What is Base64 encoding for images?
Base64 converts binary image data into a text string using 64 ASCII characters, allowing images to be embedded directly in HTML, CSS, or JSON without separate files.
What is the difference between Base64 and Data URI?
Base64 is the raw encoded string. A Data URI adds a prefix (data:image/png;base64,) making it usable directly as a URL in src attributes or CSS.
How do I use Base64 in HTML?
Use the Data URI as the img src: <img src="data:image/png;base64,iVBORw0KGgo...">. No external file needed.
How do I use Base64 in CSS?
Use in background-image: background-image: url('data:image/png;base64,...');. Great for small icons and backgrounds.
Does Base64 increase file size?
Yes, by ~33%. A 100KB image becomes ~133KB as Base64. Best suited for small images, icons, and when you need self-contained files.
What image formats are supported?
All browser-supported formats: PNG, JPG/JPEG, WebP, GIF, BMP, SVG, ICO, AVIF. The MIME type is automatically detected.
Is there a file size limit?
No hard limit, but very large images (>10MB) produce extremely long strings. Best for images under 5MB for practical use.
Is my image data sent to any server?
No. All conversion happens in your browser using FileReader. Your images never leave your device.

Related Tools

Base64 Image Encoder Format Converter Image Compressor Image Resizer Image Cropper