Skip to content

Data URI base64 encoding for images

Data URI base64 encoding is a technique that allows binary image data to be embedded directly into HTML or other text-based files using a specific string format.^[600-developer__frontend__jquery__jquery-validation-file-upload.md]

Syntax Format

The standard format for a Data URI with base64 encoding follows a specific structure:^[600-developer__frontend__jquery__jquery-validation-file-upload.md]

data:[<mime type>][;base64],<data>

For example, an encoded PNG image begins with data:image/png;base64, followed by the base64 string.^[600-developer__frontend__jquery__jquery-validation-file-upload.md]

Implementation Example

This syntax can be used directly in HTML to display images without external file requests:^[600-developer__frontend__jquery__jquery-validation-file-upload.md]

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

Encoding Process

When encoding image data programmatically (e.g., in Java), the process typically involves two main steps:

  1. Identifying MIME Type: Detecting the content type (such as image/png or image/jpeg) from the byte array.^[600-developer__frontend__jquery__jquery-validation-file-upload.md]
  2. Encoding: Converting the byte array into a Base64 string and formatting it with the detected MIME type.^[600-developer__frontend__jquery__jquery-validation-file-upload.md]

Sources

  • 600-developer__frontend__jquery__jquery-validation-file-upload.md