How to Display Base64 Images in HTML

1. Use the img Tag to Display Base64 Image in HTML
2. Use the base64_encode() PHP Function to Display Base64 Image Using HTML

This tutorial will introduce methods to display base64 images in HTML. Base64 image is a readable string converted by the base64 encoding algorithm.

Use the img Tag to Display Base64 Image in HTML

We can use the img tag to embed images encoded with Base64 in an HTML document. It is useful as the page loads faster because the browser does not need to make additional page load requests for smaller images. We can specify the URL of the image in the src attribute of the img tag. We can display base64 images by providing the information about the image in the src attribute. We need to define the accurate content type, content-encoding, and charset in the src attribute. The syntax is shown below.

data:[content-type][;charset],<data>

We can specify the content type as image/png, indicating that the string is a PNG image. Then, we can specify the charset as base64. A semicolon separates the content type and the charset. After that, we can specify the base64 string of the image. We can use tools like this to convert an image into a base64 image. We can also create a custom base64 image from the link here In this way, we can use the img tag to display the base64 image in HTML.

Example Code:

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

Use the base64_encode() PHP Function to Display Base64 Image Using HTML

We can use the base64_encode() PHP Function to encode an image to base64 string. The mime_content_type() function returns the content-type of the data provided to it. Using these functions, we can generate a src for the img tag. Thus, we can display the base64 image. We can use the file_get_contents() function to read the image that is to be converted into base64 string.

For example, create a $img variable and store a URL of an image. Next, use the file_get_contents() function to read the image and use the base64_encode() function to convert the image into a base64 string. Next, use the mime_content_type() function on the img variable to get the content-type. Then, create a variable imgSrc and arrange the variables according to the syntax above. Finally, use the echo function to display the HTML img tag where src attribute is set to $ImgSrc variable.

Thus, we can use PHP to display base64 images.

Example Code:

$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';