Image to Base64
Convert images to Base64 strings for embedding in HTML/CSS.
Converting images to Base64: Complete guide
Converting images to Base64 allows you to embed them directly in HTML or CSS files using data URIs, eliminating the need for separate HTTP requests. The resulting format is a text string that begins with "data:image/png;base64," followed by the Base64 encoding of the image's binary data.
This technique is especially useful for small images (icons, logos, decorations) where the overhead of an additional HTTP request is greater than the HTML/CSS size increase from including the image inline. For large images, using separate files with HTTP caching is preferable.
Practical use cases
Icons in CSS: Embed small icons directly in your CSS as background-image, eliminating HTTP requests and simplifying deployment (a single CSS file contains everything).
HTML emails: Email clients frequently block external images. Base64 images display inline without requiring user authorization.
Rapid prototyping: When creating mockups or demos, using Base64 avoids the need to set up a static file server or manage image paths.
APIs and storage: Some APIs accept images in Base64 to simplify file uploads in JSON requests, avoiding the need for multipart/form-data.
Frequently asked questions
Up to what image size is Base64 recommended?
The general rule is to use Base64 for images smaller than 4-8KB. Above that, the 33% size increase (inherent to Base64) and the inability to cache separately make it less efficient than an external file.
What image formats can be converted?
Any format: PNG, JPEG, GIF, SVG, WebP, ICO, BMP. The MIME type in the data URI changes according to the format: data:image/png;base64,... for PNG, data:image/jpeg;base64,... for JPEG, etc.
Does Base64 affect loading performance?
It depends. For small images, it improves performance by eliminating HTTP requests. For large images, it worsens it because: 1) it increases HTML/CSS size, 2) it's not cached separately, 3) it blocks HTML parsing until downloaded.
Inline SVG vs Base64 SVG?
For SVG, it's preferable to insert the SVG code directly in the HTML rather than using Base64. Inline SVG allows styling with external CSS and is more efficient. Base64 for SVG is only useful in CSS as background-image.
When to use Base64 vs external file
| Criteria | Base64 inline | External file |
|---|---|---|
| Image size | Under 4-8KB | Over 8KB |
| Caching | Not cached alone | Cacheable |
| HTTP requests | 0 additional | 1 per image |
| Ideal use | Icons, small logos | Photos, banners |