Image to Base64
Convert images to Base64 strings for embedding in HTML, CSS, or JSON.
Advertisement
Advertisement
Base64 Image Encoding
Encoding an image as Base64 converts it to a text string that can be embedded directly in HTML, CSS, or JSON — eliminating the need for a separate HTTP request to load the image file.
How to Use Base64 Images
- HTML img tag:
<img src="data:image/png;base64,iVBOR..."> - CSS background:
background-image: url("data:image/png;base64,iVBOR...") - JSON payload: include as a string value in API requests
- SVG embedding: embed raster images inside SVG files
When to Use Base64 Images
- Small icons (under 5 KB) — saves an HTTP request
- Critical above-the-fold images — eliminates render-blocking fetch
- Email HTML — some clients block external images; Base64 embeds are always shown
- Offline/PWA apps — assets available without network
Does Base64 increase file size?
Yes — Base64 encoding increases data size by approximately 33% (every 3 bytes becomes 4 characters). However, gzip compression largely offsets this for text content. For small images (icons, logos under 2 KB), the HTTP request overhead saved usually outweighs the size increase. For large images, external files are always more efficient.
Can Base64 images be cached by the browser?
No — data URIs are part of the page or stylesheet that contains them and cannot be cached independently. Each time the containing file is downloaded, the image data comes with it. This is why Base64 is best for small images that are part of critical rendering; large images should be separate cacheable files.
How do I convert an image to Base64 in JavaScript?
Use a Canvas or FileReader: const reader = new FileReader(); reader.onload = e => console.log(e.target.result); reader.readAsDataURL(file); This returns a complete data URI like data:image/png;base64,iVBOR.... On Node.js: fs.readFileSync('image.png').toString('base64').