Embedding Base64 in HTML

Embedding Base64 data in HTML allows you to include images, audio, fonts, and other resources directly in the HTML document without separate file requests. This is done through the data URI scheme in element attributes that accept URLs.

Images:

<!-- Inline PNG image -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
     alt="Small icon" width="20" height="20" />

<!-- Inline JPEG -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..."
     alt="Photo thumbnail" />

<!-- Inline SVG (can also be Base64-encoded) -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL..."
     alt="Vector graphic" />

Favicons:

<link rel="icon" href="data:image/png;base64,iVBORw0KGgo..." />

Embedded audio:

<audio controls>
  <source src="data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAA..."
          type="audio/mp3" />
</audio>

Anchor download links:

<a href="data:text/csv;base64,TmFtZSxBZ2UKSm9obiwzMAo="
   download="data.csv">Download CSV</a>

Performance considerations:

• Base64 images are approximately 33% larger than the original binary files. However, they eliminate an HTTP request, which can be a net win for very small images (under 2-5KB).
• Base64-embedded resources cannot be cached separately by the browser. Every time the HTML page is loaded, the embedded data is re-downloaded as part of the document.
• Large Base64 strings increase the HTML document size and initial parse time. The browser must decode the entire Base64 string before rendering.
• Gzip/Brotli compression partially mitigates the size increase, as Base64 text compresses well.

Generating Base64 HTML in a build process: Tools like Webpack's url-loader and Vite's ?inline query can automatically convert small assets to Base64 data URIs during the build step, applying a size threshold (e.g., inline files under 4KB, use separate files for larger assets).

Accessibility: Always provide meaningful alt text for Base64-embedded images, just as you would for externally-referenced images. Screen readers cannot analyze Base64 image data.