Image to Base64
Upload an image and instantly get its Base64-encoded data URI string. Copy the result for use in web pages, CSS backgrounds or emails.
Reviewed by the ToolNestr Editorial Team — July 2026
How Base64 image encoding works
Base64 encoding converts binary image data into a text string using 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). Every 3 bytes of binary data are split into 4 groups of 6 bits each, and each 6-bit value is mapped to one of the 64 characters. This increases the data size by approximately 33% because 4 characters represent 3 bytes of original data.
The encoded string is prefixed with a data URI header (e.g., data:image/png;base64,) to create a self-contained URL that browsers can display directly without an external file. This eliminates an HTTP request but prevents browser caching of the image separately from the parent document.
Worked example
Size overhead comparison
How Base64 encoding affects file size versus serving the binary file directly.
Nina Kowalski
Web developer who embeds small icons as Base64 in CSS spritesheets to reduce HTTP requests and simplify deployment of static sites.
Olivia Hart
Email designer who converts all images to Base64 for HTML newsletters so they render reliably in every email client without blocked external content.
Kenji Nakamura
CSS animator who uses Base64 data URIs for small animated assets to keep animation code self-contained and dependency-free.
Fatima Al-Rashid
Frontend engineer who converts tiny PNG icons to Base64 for single-file HTML prototypes and proof-of-concept demos.
| Use case | Recommended | Why |
|---|---|---|
| Small icons (<10 KB) | Yes | Saves HTTP request, minimal overhead |
| CSS sprites | Yes | Keeps all assets in one stylesheet |
| Inline email images | Yes | Survives email client blocking |
| Data URIs in code | Yes | Self-contained files, no external deps |
| Large photos (>100 KB) | No | 37% overhead is too costly |
| Repeated images | No | Cannot be cached separately by browser |
How to convert an image to Base64
Upload an image
Select any image from your device. The preview and file size are shown immediately.
Copy the Base64 string
Click the Copy button to copy the full data URI string to your clipboard.
Paste in your code
Use the data URI in HTML src attributes, CSS url() values, or anywhere a URL is accepted.
Tips for using Base64 images
Only use for small images
Base64 encoding adds 33\u201337% overhead. For images under 10 KB, the tradeoff is worth it. For larger images, the overhead outweighs the benefit of saving an HTTP request.
Base64 is larger but saves HTTP requests
Each HTTP request has overhead (headers, DNS, TLS). By embedding small images inline, you eliminate that overhead at the cost of a larger HTML/CSS payload. Measure both approaches.
Base64 images are not cached separately
Unlike external image files, Base64 data URIs are part of the parent document. If the image is used on multiple pages, it is re-downloaded with each page. Regular files benefit from browser caching.
What is Base64 encoding?
Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format using 64 printable characters (A\u2013Z, a\u2013z, 0\u20139, +, /). It is widely used for transmitting binary data over text-based protocols like HTTP and for embedding files directly in web documents as data URIs.
MIME types and data URI format
A data URI follows the format: data:[MIME type];base64,[encoded data]. For example: data:image/png;base64,iVBORw0KGgo... The MIME type tells the browser how to interpret the data, and it is included automatically based on the uploaded file type.
Performance considerations
Base64 images add about 37% more bytes than the binary equivalent. However, they eliminate one HTTP request per image. For small images on high-latency connections, the saved request round-trip can outweigh the size penalty. For large images or low-latency connections, serving separate files is usually faster.
When to use and when not to use Base64
Use Base64 for small icons, CSS sprites, inline email images, and prototyping where simplicity matters. Avoid Base64 for large photographs, images used across multiple pages, images that change frequently, and scenarios where you need parallel downloads and browser caching for optimal performance.
Frequently asked questions
What is Base64 encoding?
Base64 is a binary-to-text encoding scheme that represents binary data (like images) as an ASCII string. This string can be embedded directly in HTML, CSS, or JavaScript without needing a separate file.
What is a data URI?
A data URI is a URL that starts with "data:" followed by the MIME type and the Base64-encoded data. For example: data:image/png;base64,iVBOR... It allows embedding files directly in web documents.
Is Base64 larger than the original file?
Yes. Base64 encoding increases file size by approximately 33–37% because every 3 bytes of binary data are encoded as 4 ASCII characters. The overhead comes from the encoding itself plus the data URI prefix.
When should I use Base64 images?
Base64 is best for small images (under 10 KB) such as icons, sprites, or inline SVGs. It saves HTTP requests but increases page size, so use it sparingly.
When should I NOT use Base64 images?
Avoid Base64 for large images, images used on multiple pages, or images that change frequently. Regular files benefit from browser caching and parallel downloads.
Does Base64 work in CSS?
Yes. You can use Base64 data URIs in CSS background-image properties: background-image: url(data:image/png;base64,...). This eliminates extra HTTP requests for small decorative images.
Does Base64 work in email?
Yes. Base64-encoded images are commonly used in HTML emails to embed images directly, ensuring they display even when email clients block external image loading.
What MIME types are supported?
Common image MIME types include image/png, image/jpeg, image/gif, image/webp, image/svg+xml, and image/avif. The correct MIME type is included in the data URI automatically.
Can I convert SVG to Base64?
Yes. This tool supports SVG files. However, for SVGs, it is often better to inline the SVG markup directly rather than Base64-encoding it, as SVG is already text and Base64 adds unnecessary overhead.
Is there a size limit for Base64 conversion?
The conversion runs in your browser, so the limit depends on available memory. Very large images (50+ MB) may cause performance issues. For large images, stick with traditional file references.