Embedding Images in HTML & CSS

One of the most common uses for Base64 is to embed image data directly into a webpage's code. This can reduce the number of HTTP requests a browser needs to make, which can speed up page load times, especially for small images like icons or logos.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...." />

Including Attachments in Emails

When you send an email with an attachment, the file is often encoded in Base64. This is because email protocols are designed to handle text, and Base64 allows binary files to be safely transmitted as text.

Data URIs for Fonts

Similar to images, you can embed font files directly into your CSS using Base64 encoding. This ensures that your custom fonts are always available to the browser without requiring a separate file download.

@font-face {
  font-family: 'MyFont';
  src: url('data:font/woff2;base64,d09GMgABAAAA....') format('woff2');
}

API Requests & Responses

When working with APIs, sometimes you need to send or receive file data in a JSON payload. Since JSON is a text-based format, you can Base64-encode the file and include it as a string in your request or response.

{
  "fileName": "document.pdf",
  "fileData": "JVBERi0xLjUNCiXi48/...."
}