What is a base64 image?

A base64 image is a text representation of binary image data encoded using the Base64 alphabet. It can be embedded directly in HTML or CSS without a separate HTTP request, which is useful for small icons, inline email images, or data URIs in stylesheets.

Performance trade-offs

Base64 encoding increases file size by approximately 33% because it maps every 3 bytes of binary data to 4 ASCII characters. Performance implications:

Inline images cannot be cached separately by the browser - they reload with the page every time
Large base64 images bloat the HTML/CSS payload, increasing parse time
Base64 is generally recommended only for images under 5 KB
For larger images, external files with proper cache headers are significantly more efficient

CSS usage example

Use a base64 data URI as a CSS background image:

.icon {
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
  background-size: contain;
  width: 24px;
  height: 24px;
}

This technique is also used in HTML <img> tags and SVG files.

Security note

Base64 is an encoding, not encryption. It provides no confidentiality whatsoever - anyone who has access to the base64 string can decode the original image instantly using any base64 decoder. Do not use base64 encoding as a way to "hide" images or any other data.

When should I use base64 images?

Base64 encoding makes images about 33% larger than the original binary file. For small icons (around 2 KB or less) the trade-off is usually modest. Between 2 KB and 5 KB, consider how often the page reuses the image and whether separate caching matters. For images above roughly 5 KB, serving a separate file is usually more efficient. These are practical guidelines; the right choice also depends on the page and delivery setup.

Is it safe?

Yes. All processing happens locally in your browser using the FileReader.readAsDataURL API. Your image is never uploaded to any server.