Encoding Tool
Image to Base64 Encoder
Convert images to Base64 encoded strings and data URIs for embedding directly in HTML, CSS, and email templates. Drag and drop or select any image file — PNG, JPG, SVG, GIF, WebP, AVIF. Get ready-to-use HTML <img> tags and CSS background-image code. Reduce HTTP requests by inlining small images. All encoding happens in your browser using the FileReader API — no images are uploaded to a server.
base64-image.tool
🖼
Click to select an image or drag and drop
PNG, JPG, SVG, GIF, WebP · Max 10 MB
Frequently Asked Questions
What is Base64 encoding for images?
Base64 image encoding converts binary image data into an ASCII text string that can be embedded directly in HTML, CSS, JSON, or email templates. The result is a data URI like
data:image/png;base64,iVBOR.... This eliminates the need for a separate HTTP request to load the image file — the image data is inline in the document itself.Does Base64 encoding increase file size?
Yes. Base64 increases data size by approximately 33% because it encodes 3 bytes into 4 ASCII characters. A 10 KB image becomes ~13.3 KB. However, this overhead can be offset by eliminating an HTTP request — each request has ~200-500ms overhead on slow connections. Use Base64 for small images (under 10 KB) where the request savings outweigh the size increase.
When should I use Base64 images vs regular files?
Use Base64 for: small icons/logos under 10 KB, HTML email templates (external images are often blocked), single-file HTML documents, CSS sprites for tiny UI elements, and JSON payloads that include images. Use regular files for: any image over 10 KB, photographs, hero images, and anywhere caching and CDN delivery are beneficial.
How do I embed a Base64 image in HTML and CSS?
HTML:
<img src="data:image/png;base64,iVBOR..." alt="description">. CSS: background-image: url('data:image/png;base64,iVBOR...'). The data URI includes the MIME type prefix so the browser knows how to render the image. Always add meaningful alt text for accessibility and SEO.What image formats work with Base64?
Any image format: PNG, JPEG, GIF, WebP, SVG, BMP, ICO, AVIF. The MIME type in the data URI identifies the format (
image/png, image/jpeg, image/svg+xml). Note: SVG files are often more efficient as inline <svg> elements rather than Base64, since SVG is already text-based.