Image to Base64
Encode images to Base64 text for CSS, HTML, and emails.
What it's for
From image to text in one click
No server
Encoding happens in your browser. Your images never leave your device.
Ready to paste
Generates the complete data URI with MIME prefix, ready for HTML, CSS, or JSON.
All formats
Supports JPG, PNG, WebP, GIF, SVG, and any image the browser can handle.
Instant
Encoding is immediate, no file uploads or server responses to wait for.
How it works
Three steps, no hassle
Upload your image
Drag or select the image you want to encode. Supports JPG, PNG, WebP, GIF, and SVG.
Copy the Base64 string
The tool automatically generates the Base64 string and complete data URI ready to use.
Use it in your code
Paste the data URI into an img src attribute, a CSS background-image, or an HTML email body.
FAQ
Got questions?
Base64 is an encoding scheme that converts binary data (like the contents of an image file) into a string of printable ASCII characters. This allows image data to be included directly in text formats like HTML, CSS, or JSON without referencing an external file.
Base64 is useful for small icons in CSS (avoids an extra HTTP request), for images in HTML emails (some email clients block external images), and for images in applications that run without a server or in offline environments. It's not recommended for large images.
Base64 represents each group of 3 bytes of binary data with 4 ASCII characters. This means every byte of original data requires 1.33 bytes in Base64, resulting in approximately a 33% size increase. Additionally, the browser must decode the string before rendering, which has a CPU cost.
A data URI follows the format: data:[MIME type];base64,[data]. For example, for a PNG: data:image/png;base64,iVBORw0KGgo... The MIME type tells the browser how to interpret the data. Common types are image/png, image/jpeg, image/webp, and image/svg+xml.
Negatively for large images. Base64 images cannot be cached separately by the browser (they're cached with the HTML or CSS that contains them), increase document size, and require decoding. For small images like icons (under 2-3 KB), the benefit of eliminating an HTTP request can offset the size cost.
Base64 in web development: when to use it and when to avoid it
Base64 encoding was defined in RFC 2045 (1996) as part of the MIME standard for emails. In the web context, data URIs (RFC 2397, 1998) allowed embedding image data directly in HTML and CSS. This was especially valuable in the early years of HTTP/1.1, when each HTTP request had a significant latency cost, and reducing the number of requests was a key optimization technique.
With the arrival of HTTP/2 and HTTP/3, which allow request multiplexing, the performance argument for Base64 has weakened considerably. However, Base64 remains the standard solution for embedding images in HTML emails (where email clients often block external images), in PDF documents generated by code, and in applications that need to be completely self-contained (like Electron apps or locally saved pages).
A practical rule in modern web development: use Base64 for images smaller than 2-3 KB (SVG icons, spinners, small decorative separators) where saving an HTTP request justifies the size overhead. For larger images, use URL-referenced files and take advantage of browser caching and HTTP/2 multiplexing.