How to Display Base64 Images in HTML

While creating an HTML document, you can include images in various ways. These can be using external image URLs, local images, and base64 images. When we embed an image in the HTML document, it means that it becomes part of the HTML file. So, embedding it as base64 content reduces the HTTP requests. The HTML “<img>” tag can be utilized to embed Base64-encoded images.

In this write-up, you will learn how Base64 images are displayed in HTML.

How to Add Base64 Images in HTML?

Base64 encoding lessens the HTTP requests for the browser to display the HTML images. At the same time, the base64 content will be increased to 20-25 percent. This indicates that the Base64 approach is better for small to medium sized images, and it will have a greater effect on the performance of large images.

While embedding a base64 image, the data URL of the image will be considered. The data URL is split in two parts as follow:

• First component: The base64 encoded image.
• Second component: The base64 encoded string.

To embed the base64 image in HTML, check out the examples stated below.

Example 1
First, add the “<img>” tag with the “src” and “alt” attributes to include the image. Add the data media type and base64 string to the “src” attribute. The “alt” attribute will define the text that will show on the browser if the image could not load:

The below image displays the output of the above-stated code:

Example 2

Output

Example 3
If the image is slightly larger, the base64 string length will be increased as shown in below example:

Output

Here we go! We have learned how to embed the Base64 images in HTML.

Conclusion

There are three main methods to embed images in HTML that are local directories, external URLs, and adding base64 images. The base64 encoded images are beneficial in a way that by including these to HTML documents reduces the HTTP requests needed for the browser. To embed the base64 image, use the HTML “<img>” tag along with the “src” attribute that specifies the base64 encoded string. This post has explained the procedure to show base64 images in HTML.