Skip to content

Image Base64 encoding

Image Base64 encoding is a scheme that allows binary image data to be represented as a text string.^[600-developer-frontend-jquery-jquery-validation-file-upload.md]

Format Structure

The Data URI scheme for Base64 encoded images follows a specific syntax^[600-developer-frontend-jquery-jquery-validation-file-upload.md]:

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

For example, a PNG image is represented as^[600-developer-frontend-jquery-jquery-validation-file-upload.md]: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADo

This string can be directly embedded into HTML using the src attribute of an <img> tag^[600-developer-frontend-jquery-jquery-validation-file-upload.md].

Encoding Process

To programmatically generate this string, the file's MIME type must be identified from the binary data^[600-developer-frontend-jquery-jquery-validation-file-upload.md]. A common implementation involves reading the byte array (e.g., byte[] bytes) and detecting the content type (such as "png", "jpg", or "jpeg")^[600-developer-frontend-jquery-jquery-validation-file-upload.md].

The final string is constructed by formatting the MIME type alongside the Base64 encoded bytes^[600-developer-frontend-jquery-jquery-validation-file-upload.md].

  • [[Data URI]]
  • [[HTML Images]]

Sources

  • 600-developer-frontend-jquery-jquery-validation-file-upload.md