PNG to Base64
Convert PNG to Base64 online and use it as a generator, which provides ready-made examples for data URI, img src, CSS background-url, and others. The PNG to Base64 converter is identical to Image to Base64, with the only difference that it forces the mime type to be “image/png” (even if the uploaded file has a different content type or it cannot be detected). Please note that the PNG to Base64 encoder accepts any images types with a size of up to 50 MB. If you are looking for the reverse process, check Base64 to PNG.
About PNG
- Name: Portable Network Graphics
- Developer: PNG Development Group
- MIME types: image/png
- File Extensions: .png
- Uniform Type Identifier: public.png
- Type of Format: Lossless bitmap image
Output formats
If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded PNG image formatted in each of the available formats (as an example image I use a one-pixel red dot PNG file):
• Plain text:iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC
• Data URI:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC
• CSS Background Image:.base64 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC")
}
• HTML Favicon:<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC" />
• HTML Hyperlink:<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC"></a>
• HTML Image:<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC" />
• HTML Iframe:<iframe src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC">
The “iframe” tag is not supported by your browser.
</iframe>
• JavaScript Image:var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC";
document.body.appendChild(img);
• JavaScript Popup:window.onclick = function () {
this.open("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC");
};
• JSON:{
"image": {
"mime": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC"
}
}
• XML:<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime="image/png">iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC</image>
</root>
If I missed an important output format for Base64-encoded PNG images, please let me know — I would love to implement it.
Comments (2)
I hope you enjoy this discussion. In any case, I ask you to join it.
MensajeHTML = MensajeHTML & "<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARsAAABUCAIAAAA9NgR7AAAACXBIWXMAAAsTAAALEwEAmp"
MensajeHTML = MensajeHTML & "wYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAADKrSURBVHja7H15mB1Vmfd7zqn1rn"
MensajeHTML = MensajeHTML & "1v73unsyedPRBCAgFkky2yQ1gUFRF0ZtxlHD9RZxyHcb7xm1FBHQSEAQSCIiqKIvu+hiSkk973/e5LLWf7/qjuTshGQro7xOf+ni"
...... this continues with all the data collected from the Base64 field on this page till the last line wich is:
MensajeHTML = MensajeHTML & "ToFRBXwoSDW+uh2CY70haYFRBRQwlSi0+S6ggAKjCiigwKgCCigwqoACCigwqoACjh7+/wCoanLFlsvTqgAAAABJRU5ErkJggg== />"
It's impossible to see the image on my email!
Can you help me please??