You can display Base64 images in HTML using the <img> tag.
Base64 image is the image that is encoded in the base64 string. Instead of storing the image in the file format, the image is converted into text format. This allows the image to be embedded directly into HTML, CSS, or JSON. It’s often used to reduce the number of HTTP requests and to include images in places where URLs are not possible or practical.
Table of Contents:
Why Display Base64 Images in HTML?
- Offline accessibility: When you embed the Base64 image, make sure that all necessary assets are present in the HTML and CSS elements. This gives you access to it offline.
- Security: You can get a high level of security by using Base64 images. Base64 images are not stored as separate files, they are less susceptible to direct access and manipulation by third parties.
- Reduce HTTP requests: You can speed up the loading time because embedded Base64 images reduce the number of HTTP requests.
Components of Base64 URL
- Data URL scheme: You can see the URL starts with data, which indicates that the URL contains data.
- MIME type: The data type is specified, such as image/png for a PNG image.
- Base64 indicator: You can know from the term Base64 that the data is been encoded in Base64.
- Base64 encoded data: The actual Base64 encoded data follows, representing the file content.
Example:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQoAAACgCAMAAADD5dLHAAAAe1…
- data: Data URI Scheme
- image/png: MIME Type
- base64: Base64 Indicator
- iVBORw0KGgoAAAANSUhEUgAAAQoAAACgCAMAAADD5dLHAAAAe1…: Base64 Encoded Data
Methods to Display Base64 Images in HTML
HTML provides different methods to display the Base64 images. Here are some of the best methods to display Base64 images.
Method 1: Basic Example Using the <img> Tag
You can directly embed a base64 string in the src attribute of <img> tag.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 Image Example</title>
</head>
<body>
<h1>Displaying Base64 Image</h1>
<!-- Directly embedding Base64 encoded image into the src attribute -->
<img src="data:image/jpeg;base64,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"
alt="Base64 Image">
</body>
</html>
Output:
Explanation: You can convert the image into a Base64 string and enter the string in the <img> tag to display the image.
Method 2: Using Base64 with CSS Background Image
You can use the base64 image as the background image. This is helpful for setting background images with div and span elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 Image as Background</title>
<style>
.image-container {
width: 600px;
height: 300px;
background-image: url('data:image/png;base64,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');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1>Base64 Image as Background</h1>
<div class="image-container"></div>
</body>
</html>
Output:
Explanation: The code uses the image-container div to display an image as its background using a Base64 encoded URL.
Method 3: Using <object> Tag
You can usethe <object> tag to display the specific object(image or inline SVG).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 Image in Object Tag</title>
</head>
<body>
<h1>Base64 Image in Object</h1>
<object type="image/png" data="data:image/jpeg;base64,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"></object>
</body>
</html>
Output:
Explanation:
The code uses the <object> tag to embed the Base64 string, which displays the specific image.
Method 4: Using <iframe> Tag
You can use the <iframe> tag for displaying the base64 images and setting the src attribute with encoded data.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 Image Using <iframe> Tag</title>
</head>
<body>
<h1>Base64 Image Using <code><iframe></code> Tag</h1>
<iframe src="data:image/jpeg;base64,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" width="400" height="200"></iframe>
</body>
</html>
Output:
Explanation: The encoded Base64 string is embedded in the src attribute with the <iframe> tag to display the image.
Conclusion
You can use the HTML tags such as <img>,<object>, and <iframe> with the src attribute to embed the encoded Base64 string. The above-discussed methods are the most efficient way to display the Base64 images in HTML.
Discover the following articles about CSS best practices.-
How To Link A Button To Another Page In Html – Find out more about how to link a button to another page in html in this blog.
Difference Between Const Int Const Int Const And Int Const – Find out more about difference between const int const int const and int const in this blog.
How To Vertically Align Text Within A Div In Css – Find out more about how to vertically align text within a div in css in this blog.
Parse Json In Javascript – Find out more about parse json in javascript in this blog.
Html Agility Pack – Find out more about html agility pack in this blog.
How To Return Pivot Table Output In Mysql – Find out more about how to return pivot table output in mysql in this blog.
Css Flex Box To Center The Element Horizontally – Find out more about css flex box to center the element horizontally in this blog.
How To Set The Height Of An Outer Div To Always Be Equal To A Particular Inner Div – Find out more about how to set the height of an outer div to always be equal to a particular inner div in this blog.
Css Margin Property – Find out more about css margin property in this blog.
How to Display Base64 Images in HTML – FAQs
1. What is a Base64 image?
A Base64 image is an image file encoded into a Base64 string, allowing it to be embedded directly in HTML or CSS without needing a separate image file.
2. How do I display a Base64 image in HTML?
Use the img tag with a src attribute containing the Base64 encoded string, starting with data:image/<format>;base64
3. Can I use Base64 images as background images in CSS?
Yes, you can use the background-image property in CSS with a URL containing the Base64 encoded string.