About

b64codec.com was created and is maintained by the YouTube channel The Seasoned Programmer. Questions or suggestions? Email info@the-seasoned-programmer.com.

Every tool on this site runs entirely in your web browser. Your text and files are never sent to a server.

What is Base64?

Base64 is a binary-to-text encoding scheme, standardised in RFC 4648, that represents binary data using 64 printable ASCII characters (A–Z, a–z, 0–9, + and /). It lets you carry images, files and other binary data through systems that only handle text, such as email, JSON, XML, URLs and HTML.

How Base64 is used in HTML

• Embedding images: image data can be placed directly in HTML or CSS, reducing the number of HTTP requests needed to load a page.
• Data URLs: Base64 data can be used in data: URLs, in the src of an <img> tag or in a CSS background-image.

HTML

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Red dot"
/>

CSS

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

Benefits

• Fewer HTTP requests: embedding small images directly can speed up page loads.
• Portability: Base64 is plain text, so it can be copied, pasted and stored anywhere text can.
• Self-contained documents: a single HTML file or email can carry its own images.

Drawbacks

• Larger size: Base64 increases data size by roughly 33%, which is wasteful for large files.
• No separate caching: an inlined image is downloaded again with every page that includes it.
• Readability: large Base64 blobs make HTML and CSS harder to read and maintain.
• Not security: Base64 is trivially reversible. It is not encryption.