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,iVBORw0KGgoAAAANSUhEUgAAAQoAAACgCAMAAADD5dLHAAAAe1BMVEVmWbhcUKaFesb///99c7hgU62Ui81iVbHs6vZhVK+MgsplWLXw7/jRzeqjm9RdUalwY7zg3vHKxOZ5bsH49/uro9jCvOLZ1e2zrNu8tuCbk9GBdsXo5vVwZrGCeMGEfLyNhMGuqNKdlsmln852ab9mW6uVjcZnW7HBvd0KXDpOAAAMn0lEQVR4nO1ci5ajqhI1kvjWRKNRM+nHnTk9t///C2+BL8BCycM0uce9eqUjAlKbYkOhxrJWrFixYsWKFStWrFix4ofwjz2HX/8scNnw1+x1nwGhTTpNWoAKM5gQLbu6wENwWNpGTRhAhSFOYQAVpjiFAVSY4hQ/T8X8rPUs/DQVhkykFD9ARejvNz3etijel7Z7zrKrC9xCxG7DA2fiR8h4NhXhXmBC4RQM+PWD220NpsuqqYjjmP6ry0sanx9FRbjZqJ3i+3veMTJyRlIpqjjNkklbL2SSCzUVhBAg8kIYTo+hQvIJySmiaPgep7hfFLGDGxKTPCKkVphZgC12lU0xMUdFBp8xXIIkaIFrsZtyCkrFx/ff7/j7c/s7ir7/bINTnIHldZLE9amw7eTkFKfADmqaTL9VpzNNZLZGge3keWCfgI6K5moKJzH8C1ICyRV0aJta1Oc4hhrPWZyd9ahICcnsIOfovocJeXi8jaj4JDl0brotSZ7W2wvthrMdgWsWeURb48TEsUuanFSksqM8gyPq9hkp2GdlkyYjnIuj3DmTSxkVp5ykMaTadkQuUNaOc1rpOcjzMqr0qCgJSUWPvIcKt6VgHzbH0vIqimyHGpLn2y3Qsf1NYjuArohoR2QkceAYqDiz5Bj+zqSM7DylZVPmtyfI2VKRQK4zyYqm/ZQF+lGw1BKqqSBz5ZCL0wvxDBUn+MxjXo3uoaIdH/vuWAo/GBUp7TmbUfEfJlMxTQdHJ6eKdidxijY5jao8IUXjsDHzitPgFVWTKyjpR08FzUBzxOBs1K0yrqtnqGBiQUhUPJIKt08Ql5ocFe8NFSfHcYKGCvsSpZHdUBGz5IzEZUDSZkqpmbJfgKyeiqawnZTgWB0VNRAXkAuthlFhw4grNamAvFQ1HyOb7fwR9gmhkoo8//P7I4+SpHZaKk4EhIHaAAO8SOoE/CSv7UvOTtpBROIqbUrX4MuQixWGjBWhglJXlIqARFUGdLRUBHVSkHSCCidJnJ4K6psR9cfHUcGlCGrBUwHWxNu/cOH83FIRgH2MCvtMk6FvcuigrGuZAwpPUvACGBlRBrkKVpiOJhgC8O/CXIOmNoxSKpycXUBNBTSjhEZRKuI0rVlCugwVqgXu+/bjk04qAb6KQJODJI9YuiPkcgKxhCOss5yhJoyKBFgoL5RHKhV5XQOTFVrgfioUMfr75OJbhYpEigWYDjAq6GqCgqpK1HwdLvFgKhRucRsV9wFtVhDTMcQmKYd9jQO8wAOowN3CGCpsYQw5jrLAA6jA3cIkKvQKPIIK1C3+LVSEYiq2pfd/T0W72vTFVGz3/99CxbxbdEw8dVdvSSpCFxBydvdB+s7n8d93weT3jgiRineGhxo/YdnVBaZ46LdpdkP4JW1icegHDb/R1Yewltun7iSXWgiPo0Lcudt3ZMh7NwgXfMGumCvW9gwyHkaFLxu6a0/IO3ojLniy2kLhqJCPX/WReBQViMGdr6uHSGNgOCoibw3zzC4HDSZ+aVQz8gmeC/TkwMVARWcuSt7iXBzmb2Ae5mtxsbYPrR/7O89FR0UvCArqnjBG7gfn0PvdjrO7V7vQ9XcCOANDqdf5ASPU9jPGXYdhEmWHYd+te2WRoed9mYq+tlZVpWOz0bW1X030bqKeBAcudiIVo/EyDL/lLHgUuqZyvdbZM6F1siLIk284zuqiFZkE+V6HKk2Cj1OxR0jE0ozEHumzzi2myvkoFdjQ8ueJNQOoLugMbx+hAuUwfDEqxER0+0qGr6RCtFrHx4wA2k69xvsqKlCvMJ+KW7WCwpepQDl0X2WAYLOFttD5MhUtscJ6Slp6mIvOGn7zSn/6cyUqkHVF52Lmrys6nx7WhxqrzQGu6Ab9arPPcFVtP4yuqd3WVd92vcHtiln7wiF3+jXGBx9L7neuyz25q+nRob/jpGGI+He+6+6G2l7AKZSbdjcqvmLb6xUCU0vR+ls3Z7H9vFeYSRtgbnH7NjXKxSsohYVvwd2zYY9y8RIDBNvavLMTMTd7BdlE+vDuZiO3kl5ALXqn2A8z393e7COVmu8WO878R+1DCivMjhbzlVMIoJCNzlsgbme+yi5WyPWfNQjHfXXuBeNfZb9C2kzomn2XW8h73NiWiIGQNxMe4BaSU7zMhoXcYw9wi9GNj9fYxpKkwhrcIuyhWVMHV3aKFxGLcYeNV0f7+WeIsLvtnDS8hFggw/iGCAKNYqavYh6Q/kKfv5oa53hYzlf5CmIxlgpLtX2hrmQ+/yuIRdddB/7pHPyxPOUYwR+zEXXhCWJxCILgnvLdIPaIx3GB78kpqsCJk5zoCWIREOLdU77rLULIkUt26VNG248v+m8uXO3njj33hJKc9wlicScVvVScy0I+d+zY6d+7xevoVhGTE+4TxGKg4nA8ojmOx97zD6OvzMqvN8HIQ1tP0jvKtB2oNoywvFi0VNh1Di7uVWCI56XUStvzSssqSvoeWclMqliWjJ6sPPo1sSzP+3yDLDur9KCasPTiIxx61EMKyO553i/OWrTfZ/q7K7O8WLRUBM27c6S2LDCFCmlNSMYOKPIjS6CguZsXlMnZsgj5pqy4FnxCaz2Se+xU0dfIRBl/Q6a1dWr0uL31y4tFN0Dq4nikL5oerIJxQG0D+4M6ONI39oGiFMw6BlnBPD+vggJ8JWQ8xd8hzQ795lGPCGJIsw5n8IrifD5aisVHhymvcAdPWF4sBNkEa39Zh5zkB8uGYdElO4wcMLNqpKJkDsGaSt+H/6JdBWc3jIrfIa0B6mnJpNhNmrFRun63CmUHi4tFR0VQx2WZM3+u6WfdmHsosrJMGRUVUwpqXGMpxQ7S3pgVPRUfezcEt0jCkFLBB5qqcT7cfQ5F+PwG5/JiEQijn1ERUMubLrXzNpkOmUYsKioQXXfvCWPA5agAZjbfhPztDwYoOnTilRHemxYXi4YKGP1e0CtmSvKgF4z6YLUH1jHzGAt5R0W4aagIWU6fWb+FY6jnc0yF0oiJ1yQYxPdGFqaiYsJI7aFUwFHWfANLLUZU1uQ+wlhJqKSw9dTBbajYN0XBJPj8A63NGSMyFcol1IxbSC+WLCYWDRUwa5SHQ93OfQeYARoFgQTHCjxGRZbY1qGkCRX9BYXAiatdQ8WupSLcw2f+9wPGhwdtBsbq7eebbBGCSbfYP2tl0VDRLgLSdhlQNprQLSu8vJ1B2nXFof1a7Rsq3JYKiyploy6/oc3Nr7V8SH6OYOLdGeSx98XEAkhIrWb5mBeHloqgE0Y6IGCtWVMqYtIvPI9MZdNg01ARdlTQz09aEx0lm69vuujYDlYpmjA5PpBn6JeiIunWD/YRfR3oYA+RyTEY8tiQPu4mOu/42+1XG15+fbyJr8GgGJyCD01ZePq8PYsgKbx+uXQ9xoPXE0P1FnqR6byJS4oF+/kkDw9INTDuJZyKngu0Fv2nMpcUi6qPOm9CawM3SSqomIzD9Q1cVCy03hdUYtwyWLyjFU659hVuv7Bu3oGxV6gw9VSAvhgavO09up+nxIQRkwG8mNPg96a6WXAUUo5vlqrFYiQVqrrmAtwfxXxI2f9ggVoQpDOKF5l5GPlI1sSvEEjtVouFKBXz7BrpFNZ8eD39HhR/oqVsntyn/JbFDdAYIm3O9nAkFpJUzHNrKBOqe+A82owqsRDTZ6k11ScoJn6QoUHrByqxEKViTjQNf867W13I2KD9LRVWSIWiLqMfr5hYIkl+IDpJB1wqRopi8DqTgzKakpqPiwUuFWNBeNVnsVroiAUqFcg4eNVnsVrgPS5kwaUCMfhln8VqoCEWmlLxGmIx0V0aYqErFS8hFt0L6VgsOS8W+KoCq+sFxGJ+pTwhFlcHICaLhUYkOSEWVwcgJouFxvbChFhcGYBIRBoGDZ+eEIvrAhCZSMOg49NKsbheKgwWCy2fVorFDVJhrlj0twAVEJsviwUuFTN1mSoWc7O92HxZLHQDEL1r/TDm1oDTYUh7OBuANDA7DJm9nYOHIaFYuj05R6vZYchsR+FhiEiF9FqtevPS6DBkfviKYjHlFfP+b7RYzPeT8PNhvmB7z0zzu83zN0RNFguNO7/9bdVw2BuXZ5CND5GnxlxpsljodNNmjN5a7Mm8qfscBouFzuAdm8sxN2Zisi6DxUKrl0bL6XGQztE0efPLYLHQ8OlxmCLc4JJ9Rq+q+1v+cOy1Okm8rSrd6hO4mL0hqnfBn4CrMT4s4bbq2FiOqHkN8PUu+BNw95u9zh3d0KdsKH6vIGQvomrVwy5oJBMrVqxYsWLFihUrVqxYsWLFihUrVqxY8Tz8D5V+uF1455TAAAAAAElFTkSuQmCC');
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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxATEhUQEhIVFRIVFRUVFRUVFRAVFhUVFRUWFhcVFRUYHSggGBolGxUVITEhJSkrLi4uGB8zODMsNygtLisBCgoKDg0OGBAQGi0lHR0tLi0tLy8tLS4uLS0tLS0rKy0tLS0tKysrNS0rLS8rMS01LS8tLS03LS0rLisrNy0tK//AABEIAIIBgwMBIgACEQEDEQH/xAAcAAABBAMBAAAAAAAAAAAAAAAAAQIDBAUGBwj/xABQEAABAwIDBAUECwwIBwEAAAABAAIDBBESITEFBkFREyJhcYEHFDKRFSNCUpKhscHR0vAWMzRTVGJyc3SCk7MkNUOio7K08Rdjg5TD1eEl/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwQF/8QAKxEBAAICAQEFBwUAAAAAAAAAAAECAxESBCExQVFhEyJSgZGh0RQjQsHw/9oADAMBAAIRAxEAPwDpqe1RRnLuUjStiQKGd/BPc6wVchA6NynYSqzdVYjKCYJSErVIAgaxpQWqcBNc1AwBLZOaEtkCAJwRZOQIlQiyAQlAQgAhCEAhCEAhCEAhCpVdXbqt14n6FYjYsyTtbqVA7aDeAJ9QWOJQukUgZAV496fiUrKph4271ilEy7gHYiLi4DcBsDYjMg379DfTSyaQNgQsPBK5uWN1r6Wjyzvl1eWXd25rJMidkekcdOEfMn3vG9vBYmNCZIohC78a7hwizsCPe8bg+A7UsWK5a7O1rOta4I42yxXBvawzCyHFNIUlklkEdk1wUuFNIQMa1Ne1TgJHtyQQWTHKZyieioHlV+kB8CR4jVOrXgNOdu7M34ADtOS1gbUfDGY2sbdjCcWKwBwGQDDbQNFteAUru2ThXy3/AE3w9zn66bdC7KycVp20NvSFp6O8Za6QXxNcTaObUWy60d/V2q/TbUmN3DE5jcZcLMPVbJM3UWPuGgZd6uf9mkWt4zpcWKckzEM+Uwn6Pt9uKxQ25oMDbk2ykBGZaOqbdbXgrdLUF8bHEAEtBNtM1wx9TjyW41nfi3l6bJjryvGvoeSkTSULu86aMqZoOirsU7nZW45X7j9vkQMkfdMuhIgFYhcq6lp0F1injChjVloQBTXXspE16BjLp5TWp6AQhKigIQhEBTc05CBM0oQhAIQhAIQhBDVy4Wk8dAsSrm0nZgdl/X/ssNtjpzEW0wvM8hrLFoIvcucC4gXDWut22XWkC254GRIHeQEnSt9834TVoDty68m5prkm5JkpiSeZJfclQN3F2jZo6K5Drk4qTrC56tseWuvYvT7PH8cfb8o6N0rffN+EE2KRuEAubcAA9YHO2efHvXPo9x9oAuJguCRYY6UYRbS+PNP+4qu/Jh/EpvrpGPH8cfb8m257XZNLH0NM9olkcGg48JDbOc6zhcg2aRftWru3B2hwMIuPxl8ydfRz5K9ubu3VU9bDLLDgbeRuLFCczE+ws1xPBdG2fAwxxnC2+Fhva+fpXuQCcyTcgG5XK+WcU8aTEwOWs3Cr/wDknPL2zTLT0c9CpP8Ah/X8ov4h+qupy00Yaeo3Ie9ZwBtrlxPrK55vds5z6jEKfGOjjGLzfpNG6Yhs+YeAkPcFn9Zk9Bjz5P6/lF/EP1U3/h/tDlF/EP1VX9hnfkh/7Q/+oW6bq9IHEw7Np6dpLWyuBq4XlouQWskpGdJa5yuBnqFf1mT0+gqbp7MrKR5ZUOYIXtJaOkxWe0jS4Frgm/cFsxqGX9Nvwm/SsH5SNmTVDII4WY3CRziLsb1Qwi93kDVwWj/cZX/k/wDiU311a1rl9+14if8Aeo65ZFlq25FPWwh0FSwhmHFES+N1sJAc0YXHLrNIHDNbUuF68Z1vaq8oUEl1blCqyLIw9bs2F17xtDjnjYAx9/fBzc7opabA3C5xk/OeGl1uRIAurUpzTVrlOtBMA5D1DuU8NtLBQpQsqlwDWwy0yGv2+RQvU73evj3kfb41WemjcoyUJpKREWWmwuU2J+dzx18ft8Sie+5twCc1BOQkTtQD4epMKBU+E5qNOCDJQC6tKGl0vzUyATHHNPJUQQOCckCCgUJU3NKLoHISIQCEIQCEJCUCoSXKBdAqEIRWM2h6fgFHR/fYv0z/ACpFNtEda/MKGj++xfpn+VIuv8UcU2jC3ppeqPvsvAfjHKv0Lfet9QVnaT/bpRr7bLpb8Y5QB45H4vpWYx3mNxEuekM+BrS4sBtyDedvnWHrZWyEdQAC/AHXwWckwOBaQSD3fSsdVUAy6MHtBI+JX2V/KTTafJJSxsr6eQ2DnCUA5DWJ9mjvsu50sj2sa0xPuAASCwjI4b3c+5FutnnbtyXmqlmfG0YgRhNw5pFxY3ByNwQdCNFkKnf3aWQjrJmgcT0ZJ7M2n6Vi1LRPasTp6HfM4gjon5i2sOV7j3x0sDx1GuYE8IIaAdbC+nLsyXnrZm+O03Al1dMSDa3tIt25M+1le+63aP5XL/h/VWNLyd6QuC/dbtH8rl/w/qpw3s2h+WS/3Pqpo5N08spaYqdpsT0rnAGxyEZBNu9wHiuRzVELRcBrs7WAbdZTadfNKTJI90slrAvcTkOA4Aa5CywVJDG5z8dsV/R9Eam9u5ahmZd13At5lSWtbo6m1tPwhui2dahuHK1lFRAZt6OpAPZ5w23etvBR0gOCoyq8qVfl4/YoMeUiUpECpzefLNNRJkLc8/o+dBGJLG/PVOkChcljdlZFMKRBQgaxTNUTVK1EWIuXP5UFNYU9yBqcxtzbmkVmjZmTyy8ft8qC/FkLck7EOY9YUcZzC4Nu5GPZxhsL+ez8B76VNjvxULXDmsdvd+A1f7NN/LcuX+RJoFXPYAe0DT9Y1B2ZqVcb2/5OauNlRVGpjLGCWbCOmvhGJ+EZWvbJa3uju9PXyPijmDCxmMl5kIIxBthh45qbHohKudN3cmoNj18UsrZHPEkgczHkOjjbbrZ3uwnxXKdkbUfBPFUBzj0cjXkXJuAesPEXHimx6bQqW0Npsip31RN42RGUHmA3ELd+XrXmioq5Hlz3PdicXOcbn0nEk/GUmR6kQtT3kcfYWQ3z8zZn+4xad5EHkz1NyT7VHqSfduTY66hCFQIQhAIQhFVNpMyB5H5VRo3e3RCx++G54D2qQ8ddeF+2yy8zLghYbZgs+D9LPTUxSEnLLUk5LcT7so41UQufUysa1ziZpcmhziQHOOQGfBWvYiT8nl/hT/QsxuE4HbGX46qHqbID8i3XaNY4SyDznaDbPcLMjoywZnJhc2+HldeuOo4RFezujvSHM/YiT8ml/gzfVR7ESfk0v8Gf6q6xs/eNkbAxzauUgk45GQYjc3scBAy004K03eqMmwgqSToBGwn1Ylmeun4YHHDseTTzaX+DN9VYas2MGvc1zXsNgQ1wLSL8bOF7XBXpHZ1b0rS7o5Y7G1pW4CcgbgXOWa4l5Z5neyQa3FcQROyvn1pLZDX0SuWXqPaRrjEJLV6Oj6O7i7h3C2tz2qOfaVvRaLcS42UHnjnOIecLcJBboNDz0N+K6XuFsGOkmmlmidUi8cUcwDBH0c0Ecz3Bj3dYkSgHXIOt7oLgzDnXsk7KzB8K9+wWWRuNL/Itt3z2FTPw1FHTxUsUTah75MMTWTAQdM0BsZu04WkgODcn37DpG7exayrkc+ngdNg++WdE0Nx3sLvcATkchyQ0tKhUbMaR1T1r3u4k5Hgto+5DagxF1E9rWi9+kpnHLM9VshOmdhdYYFB1PdJgFDRtGgjqQP8AuGrZtnze5Ph9C1rdX8CpP0Kr/UNWbgNnDvC6RG6twy6r1jbgjlmFYKgK5qxaRSzss4j1dyjQK0KOQqTgonIInKIlSuUT0Dtc8vWEKAhIipmKVpUTVK1EStKmbooWlSsKBFkIW2AHr71Vgju7sGf0fMruFAB2a8+mOZ+0XtpiRUGpm6MtcGkO6R+jjkMrr0EGrhe7g/8A22ftk3+aRSRlNq7J3ibDI6aWQwiN5kBqInAsDTiBaHXOV8k7yKn+lT/qP/I1dN3tP9Bqv2eb+W5cy8iw/pU/6j/yNTxHTN8T/QKv9mm/luXNfIl+FT/qB/Maukb4fgFX+zTfyyub+RQHzqf9QP5jUnvHRd/P6tq/1D/kXCaTZuOknqAM4JIL/oS9K0/3hGu67939jqv9Q9c98lWzRUU20ac/2kcTB2EibCfA2PgkiHam84dsOCnxe2Of0D88+jp7PF+8GEetazvBssQRUlxZ8tP0zufXkfgv+4GfGquw9lPqKmKlIIL5Axwz6ov7Z6mh3qW4+WxgFVCGiwFMAAOAD3gBQb3vL/Usn7Gz/Ixab5Dvv9T+qj/zuW57y/1LJ+xs/wAjFyLc/emXZ75HxxNkMjWtIeXC2Ek3Fu9PEeiULm+6HlHnq6uKlfTxsa/HdzXSEjDG54tfLVtl0haAhCEDc0uaVCBDosdTx9emeMw62dwc+gfxAAPgFknKvTnKA/o8Sf7J3EgE+ITY5P5P5MW17/8AOqx8ESt+ZbJtfYkrp5XB9HZ0jyMVTTNdm4nrNNC4g9hc7vK1rye4fZfq6dPWev22/wAd1lNuxyecz2YbdK+3tQPujx9iZL/Dd+kdV1ya3XflCL0O6NW8YmNpXN5tqKcjLtGzlNDujtBjg5jYGuGYc2ohaQeYI2dcLEU20K2NuCOSZjRezWNe1oubnIbHtqrdJtetL2iWpq2R36zmMfI4Dm1h2S0OOmVwuM+iOjbMjlbFG2U3kDWh5xY7uAzOPAzF34W9wXGvKvOxu1TiyJpYRfPLrzfKuv7BjIiDjUTTh9ntdOyON7WkDq4Gxsw6Xs5t8yuReVuia/aZc45ebwiwyzxSm9/FSC3c0Lac7HOGHMAWJ558LroG4m3BBE4SB4o+qel9uc2M5dWVjTcxEWGLRhLb9V1lp+z9nAXxEG+gsCcIJGp8Mu5bFs7aboI3xtGVnFhF8UchZhDhbMjIZerkfXXpb2rySIZLfzaTJBDBAJRStBcHPMjekcBhDREbYWBrr2LQDdpADQLybg7UpYGTionbAHOhcMdwx4bjBa+2o6wyuOGouFhNu1RqHNNsDWXwN5F3pOJHE/biTrW0IHkHrE29zlw1tbVL9JesbWfN2p2+Oy/T8/hxe2uc1jnOdIX5NZYelYWGl7gWIzvyOFtmgHUAD1BUtmwxlgda7gcyeBGnzK+vNpne3Vd1/wADpP0Kr/UNWZgBxDvCwu6v4FR/oVX+oatjoYvdHwXSs6q6QtudkmXSvTS1cxXrG3F+XyH/AO/KqllknN4c1QwkE9mXigbIoXFSOKjcgicoXKZyhcgjQglCCdjCpmtTQntQOATwmhSRtJIHNBdpo+rfn8nD51MnAZW4aJt0CqRhVDa1U6KCWZrcTo43vDc8y1pIGXctC3Yj2nXU/nUe18Epc68QiicyOxIDXN4XFiMtCNdUHTi1IWdq03erfQ0lTT0zWl93A1DjFISWWFuhtYPeb3IF7ZC2aydXvjSRRQzSmSNk5cGF8bmkYDYmRpzaE2M8AnXWsQb80bqeWrtMIYnMaXOjILsZs0sF8xmM1e2xvJTU1M2smLxC7BYtaXO67cTbt7kGaCVYTeDeilo2sMznYpPvcbGl8j9NGjvAz4lY6TfunNNPUtjnBh6uCSGRp6RzSWAgXs3LMnIDXgg2y6LrTt0t9m1FPjmZI2WOF80rmwyNhIYTfonuJDja2V+ay9PvLTPoztBpf5u1r3klpx2jJa7qd4KDNIusBUb30jKeGrc5whncGscW5gnFm8X6o6pTdj73UtS2V7C9scLQ58sjCxhb1us0nUdUoNhukWqUvlC2dI9rBI9oe7CyR8UjInu0sHkc+dltaAQhCAQhCAKrRghkbgLloYbZgnq2I62d7E68dVYcoaS/Rsy9w3hb3I4XNvWUHOti00ce8DmxCzC+WQAgjrS0/SPyIuOu52S3ar2zVte5rY6QtDiAXVha4gHLE3ojhPZdYf2ClbthlbkYXggm4BY/oCwNI5HCLEc0zae6lY+aSRrYMLnuc3FLCDYkkXBoXEH953eV0vaNx49kI2vZ21Q5gMz4GSXN2smbI0C5t1iG3ytwVn2Sg/HR/DZ9K0L7ja73tP8AxoP/AF6kpt0q1rg4xUrwDcsfLFhd2Ow0ANu4hcZG/wAM7Hi7HNcBkS0g58slzPygbAlnrHSskga1sUbSJZcDssbiQ3CcrEZ966HsmkEcYHRRRPIBkbCOpjtY2OFpdpa5AOS1rfCfCyqcD/Zhnc57A0ePXb6wtUrynRLkLnYcHdn42B8dVaWR3KhbLXxsdlcSBmIEguDHe5BF+rj8bcltR8mkgyE4IGhwWv4XK+vPUUx2mthoixz43ZPt1XFwBuMy2xItqPSbrzXTD5NZLfhAvfTBlbnfF8VlS3p2PDR0Xmckoe9vtsLsOF7pHPflhuci3E0u0A1zssW6qlpiKjVNhbBkqGuMckDAw2Ill6M5i4IGE3GovzBWYp9yJi4B9TSMbxcJsZA7G2Fz2XCg8nUsgqyxrSWvjcH20aG9Zrz+91f311mmpOLvV9K8WakVtKaU9nbPjDYo4g4QQx9GxzsnSElpe/uJaM+JLrZWJy4aAlSOK4NI3JpSvKYSgCq1ay1jz+X/AGsrIKSoYXNPrHeEGLKa4J5TSghc1QvYVZKjcEFUsPJCnslQSgJ4CSyVA4K3RN1d4D7fbVU7q/HkAPtfiip7ppKjL03pEQ3aFfHBE+eQ2jjaXvNibNaLk2GZXK97pNlsaKzZtR0dWXtwsp3OGO5zvHbqc7ZA6WN11N7wRY2IOoOhHcqUGzqVjukZTwtf75sUbXfCAug1TfSsLavY9RUWjw3MpOTWPPQlwPKxv6k/yj1UFQ7Zj2PZLDJVFt2kOY8CSNjhfiLhwW21sLJW4JWMe3XC9rXi/OzgU2KniaGtEUeFmbG4GWYb36gt1c88lNDG+VZpdsycNF8JiJtwa2Vlz3ALTN/95aSXZMEEczXS4Yi5gPWYI4iHYx7nOwXVRO05OGuRBzB71BDsikaCGU8ADvSwxRAO49awzV0NH3lqWU+2KGqqMqcwYGyG5ayQCQXPK2Np8b8FsW3tsU9VQVzaaVsxZTyNdguQC6NxAvodDotgqaWORuCSNj2e9e1rm+oiySjooom4YomRt97GxjB6mgINJ3O2nBLsjzSOVjqgUtReIG7xm8Xw62u9nwgsBsveKkbsB9M6ZonLJoxFfrl0kjiCG+9s69+wrqVJs2nicXxQRRud6TmRxsc7jmWi5zQ3ZNMHmQU8PSOvieIo8Tr5G7rXN1NDle8QB2Hs0HQzNHeCJgt98odFI/Zs8UDTcNZZjB7hj2uc1rR+a05Dks86hiLQwxMLG5taWMLWnmG2sNSrCaHFempKmghgn2y1kbWsAp/No+kje0YcLcPWda563G+a7RG0gBpNyABfnYWuofY+HFj6KPHe+LAzFfnite6sKgQhCAQhCAUIhc2+AgDM4S3IE29GxFhqbG+Z4KZCCGSNxFjgI5Wd74EcdbceeajFK/37vhz8zf3fKytIQVPNH/jHDmQ+e+hva77DO2t9OKiloXj0ZJT3yy39eJZBMMrRq4DxCsDEPY8avlH/AFZvrKJ8DXNLC3E1wIcDd2K+uK+Zvz1WZdVR8Xs+E1c/8sAkdSMfBIOjY8mdrHWJaRZrnW1YDe406wPBbifRJQu2KKWphqIpGujZKwlr3sEjGk4X2JPXGEu/O7HarqVdTdJG+LE5mNjmY2HC9uIEYmHg4XuCvJkUcYNywEcRk2/jZZJla85MqJ4zwDp5MB7MYLcHiLc3BTJecmpnwZ5PSm7Wx/NKaOm6WSbBi9skN3HE4ut2AXsBwAC5B5TNpxv2lK1ziGxNihLg1zsPV6W1ud5HZX4LTjV1MZ9uqakOH9kKicPOVxjOL2tpuNeseAscQo1VZJIbvcTqQM7C+pAJzPMm5PEkqY7TSdwcnVNz99tkU46FoljLiMc0rG9c8MRY44Wi5sNBc56ldOZICAQcjmDqCOYK847sbsVFa+0YwxA9eZwOBvMD37vzR421XeaFrIYo4I7lsbGxtLtSGNDQT25KTMzO5aiZZi6jfIFjHTOPEpwlKirhkTMSr9KnCRBYaU4FVukTg9FVqhtnHkcx4qFytVQuL8vkKqXRDSEwhSFJZBDZClwpUElkFikARdFMgbn3Z/Qp3vT2R9XkTn9H27VA+IhEI6VMLktkiB10oTWJyKEiUpCiFBT2vI0UYUgbzQTsquYViOQHRUbhLiQZMNTrKhHUEcfWrDKoHXJBOkQChAt0jihBQJiS4kgKLoFQkSXQOWO2ltTojhDbutfPIf8A1X7pk0LHizmgjt+bktVmN9o16XbEx4gdwHzqs+rlOr3HxKzkmxIjpib3G4+NVn7B5Setv0Fd4vjGHJJ1KbZZV2wpeDmnxI+ZRnY03Jp/eHzrfOvmjHKhtqsdFHjaASXhliL2DmuOJ35pwloHE35WOd9iJ/ef3m/SoanYz3C0kQcOTujI1B0J5geoK8q+Y5FWbGa9xMdmFxyY1pw9zG6juF+5RHdKutiEBcOxzGn4LyHfEuuwbJLPQiay+uEMbfvspRRSe9+MKZIxW7uz5ppxCpjnhGCeFwY3ICVj2hvGzH5Fo7AbdhWybA2TQZOqWS4snC7hJELj0XsaGOPfd3a1dN8xk0sLd4WNqd0Y35j2s/mHL4BFvVZZpXFG+UnE+hqWYbQvjLGD0YiW4Gg2uYnNa5rcxmAQOJCuNq3jj61iaTcx7JGv84Fm30jIJDmlpF8WVw4jTitgbQt4kn4ktbHE9+/kpsFdmA4er6FfUMUDW6BShcLzEz2QoKaTknJjtVgKHJ4lUaWyCcOv3KrbOysRxHuT52WsfD7eHyIKwYiykSEIqKyRSYUIhyClQirjk0pEIitLqo3IQilanoQgQoKEIhRohCEUICVCIcE4IQglhOYV1KhAJClQimjVKhCBE1CEQqUIQilCRCEDkIQiGu0Kx5KEIGlMQhFIUIQiBDkIRTUoSoQCiKEIhymhQhBOmzeifBKhFVkiVCCVpySoQg//2Q==" 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.
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.