html

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:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/
AP+gvaeTAAABHUlEQVRIie3VsUrDYBTF8V/tJLqLhW5i3Rx8jG4+hZuCi+ALKILv0d3JWaFzF9HJwVZEtIKoaM
E4JNEYk5 KaiCAe+CD3uyfnH27yEX5Bq+hjgA7aqOV4W9hFD7dYKwLoI0itYzRTvm2MUr6bIoDLDECAC8xHns0
cT68IoJNzc4ADNPCY 098pAmiPAQTYz9l/wUIRQA1HYwDnOftbRcJjNYUzzwp6TtUP2JgkPFZDOPMsSB+HWPfx
4r+tFewJP9UY8GOaGJA8octYwl TJh3jFiehMJMMWKwiPM1vJItaZauYb4DQu6onGFeYwUxJwjW5cpEfyVDL8S8
Y/YGLAfQWATxlpwBB3JcKH0XpXPcM0wCymc /pZGgn/hN3o+g/pDZs7e69Gnj57AAAAAElFTkSuQmCC" alt="potted plant">

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

Example 2

<img src="image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/
AP+gvaeTAAACeElEQVQ4jZ2QTUiUYRSFz73v15jQjKDmTyZGKAXRD1ijpubIZJORVmILUSg3LcpFYJvESq
FVm9AgonBnili4MKXMyREyJa0W/SCERmk6aNo06jjZfO9t0cZwFtlZ3+fh3EMAUHW//jQglUTouVVW1wCC
YFVGXK7EFY0Sio3JR2BpVC8udmW73YMAQOdba0u3xcU3hbS2GazMyZm5G41l12oAoM/hMCKjoxsksJwljs
OCzXHvxO+L4OeeNPL5nmS63TUGxDgbMrUtxmbFrM+vwDgGoOZFVlYkNkR06NiEr7qq2kssHSKcA5ZFfeT
oTa6/cnHA6exkZnQbSv2a8f1AdJQVDB4CAMMy+5rSUpR54ZIA/BRglyL+wppnIHwCB+yDbLGcVC8feIZ3
FGbwcvBn1Jx/qWOK5qub5hYqoVSx1N7xkBJNTFaAvwuJjZkiIDKPhaVkGv+4kRAmQ85do5JXEtSnzjzSR
AaDtoumQQJ2/xmYPqDrYTmNDLZwOAEQ2mqm7mkTcDIRYjVRLysUQMwxDUxATBcN9EcaRM1GeD6kKXFLN
hO/ES1KSBcA6BGl9pKpTW5qnIXVNmlvafaGbcBkBtnd69VixpCiKAImNDhFcShg3L66D5/Gk4JTk+cAQ
K35PyPaJowieJeTtN9vUkKCIXPfZtTj1kK6V5fPs9N+64rFafd4ggCwZsSh3PjLRFQCIYKyJIHYJmQww
RgzYdQffPa2ffX9X4Lh3AS7BroFdN0I0N39r6YC4UcOk3RH0c7SvPy2oZzE9H+GABgAkHHoeJqAWj/zp
orM/un36xFQlqM41QTahaRiuK9zXTAAMFmUnxSV/w8MAL8BbBsAuiOrf00AAAAASUVORK5CYII="
alt="racket">

Output

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

<img src='image/png;base64,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'
alt="snow flake">

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.