How to display Base64 images in HTML ?
Base64 is a method for encoding binary data into ASCII text. In the context of web development, Base64 images refer to images that have been encoded as a Base64 string. This string can be embedded directly into the HTML code of a web page and displayed as an image, without the need for separate image files.
There are several advantages to displaying Base64 images in HTML.
- Faster page loading times: By embedding the image data directly into the HTML code, you can eliminate the need for separate HTTP requests to retrieve the image files. This can result in faster page loading times, especially for smaller images.
- Increased security: By encoding the image data into a Base64 string, you can hide the actual binary data from users who view the source code of your web page. This can be useful for preventing unauthorized access to sensitive image data.
- Improved compatibility: Base64 images can be displayed on all modern browsers, regardless of the image format. This can be especially useful for cross-browser compatibility, as different browsers may have different support for different image formats.
- Simplified development: In some cases, it can be easier to encode images as Base64 strings during development and then embed the data directly into your HTML code, rather than having to manage separate image files.
Displaying Base64 images in HTML involves converting binary image data to a Base64 string and then embedding it into the HTML as a data URL. A data URL is a type of Uniform Resource Identifier (URI) that embeds the image data directly into the source code of a web page. Here’s how you can display a Base64 image in HTML.
- Convert the image to Base64 format: You can use an online Base64 encoder to convert the binary image data to a Base64 string. The result will be a string of characters that can be easily embedded into your HTML code.
- Create a data URL: The Base64 string must be wrapped in a data URL format. The data URL format consists of three parts: the data type, the Base64 encoded data, and the ending of the URL. For an image, the data type would be “data:image/[format];base64,” where [format] is the format of the image file (e.g. PNG, JPEG, GIF).
- Embed the data URL into your HTML: To display the image, you can use an HTML image tag ( ) and set the “src” attribute to the data URL.
For example:
Here’s an example HTML program that demonstrates how to display Base64 images in HTML.
In this example, Let’s say we have the following image.
For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts
- The first part is the Base64 encoded image.
- The second part is the Base64 encoded string of the image.
Therefore, the Base64 of the above image −
HTML
Example: Let us see the complete example.
HTML
Example 2: There is another example HTML program that demonstrates how to display Base64 images in HTML. In this example, Let’s say we have the following image.
For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts.
- The first part is the Base64 encoded image.
- The second part is the Base64 encoded string of the image.
Therefore, the Base64 of the above image.
HTML
Let us see the complete example.
HTML
< img src line number9 index8 alt2">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» alt = «GeekforGeeks» >
Note: With these steps, you should now be able to display Base64 images on your HTML pages. However, it’s important to note that while Base64 images can offer some benefits, they also have some drawbacks. For example, encoding images as Base64 strings can result in larger file sizes and longer data transfer times. Additionally, Base64 images are not cached by the browser, which can result in slower page loading times for repeated visits to the same page. For these reasons, it’s usually best to only use Base64 images for small, simple images, and to use traditional image file hosting and referencing for larger images.
Conclusion: Displaying Base64 images in HTML can offer several benefits, including faster page loading times, increased security, improved compatibility, and simplified development. However, it’s important to consider the drawbacks, such as larger file sizes and longer data transfer times, when deciding whether to use Base64 images in your projects.
How to Display Base64 Images in HTML
Base64 encoding and Data URL go hand-in-hand, as Data URLs reduce the number of HTTP requests that are needed for the browser to display an HTML document.
In this snippet, we’ll demonstrate how you can display Base64 images in HTML.
How to Use the ![]()
Tag
The tag has a src attribute and contains the Data URL of the image. A Data URL is composed of two parts, which are separated by a comma. The first part specifies a Base64 encoded image, and the second part specifies the Base64 encoded string of the image. Add also an alt attribute.
img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>Now, see the full code, where we need to place the tag presented above within a element.
Example of embedding a Base64 encoded image into HTML:
html> html> head> title>Title of the document title> head> body> div> p>From wikipedia p> img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> div> body> html>Convert your image to a Base64 string
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Image to Base64 title> head> body> input type="file" id="inputImage" accept="image/*"> textarea id="outputBase64" rows="10" cols="80" readonly> textarea> script> document.getElementById('inputImage').addEventListener('change', function(event) < const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = function( ) < const base64 = reader.result; document.getElementById('outputBase64').value = base64; >; reader.readAsDataURL(file); >); script> body> html>