Can I embed a .png image into an HTML page?
PhpHtmlImageEmbedPhp Problem Overview
How can I embed a .png file into a blank "file.html" so that when you open that file in any browser you see that image?
In this scenario, the image file is not linked to from the HTML, but rather the image data is embedded in the HTML itself.
Php Solutions
Solution 1 - Php
There are a few Base64 encoders online to help you with this, and this is probably the best I've seen:
http://www.greywyvern.com/code/php/binary2base64
As that page shows your main options for this are CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
Or the <img> tag itself, like this:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
Solution 2 - Php
The 64base method works for large images as well. I use that method to embed all the images into my website, and it works every time. I've done it with files up to 2 MB size, JPEG and PNG.
Solution 3 - Php
I stumbled upon similar problem now and the solution is:
#!/usr/bin/env perl
use strict;
use warnings;
use utf8;
use GD::Graph::pie;
use MIME::Base64;
my @data = (['A','O','S','I'],[3,16,12,47]);
my $mygraph = GD::Graph::pie->new(200, 200);
my $myimage = $mygraph->plot(\@data)->png;
print <<end_html;
<html><head><title>Current Stats</title></head>
<body>
<p align="center">
<img src="data:image/png;base64,
end_html
print encode_base64($myimage);
print <<end_html;
" style="width: 888px; height: 598px; border-width: 2px; border-style: solid;" /></p>
</body>
</html>
end_html
Solution 4 - Php
A quick Google search says you can embed it like this:
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
But you need a different implementation in Internet Explorer.
http://www.websiteoptimization.com/speed/tweak/inline-images/
Solution 5 - Php
Use mod_rewrite to redirect the call to file.html to image.png without the URL changing for the user.
Have you tried just renaming the image.png file to file.html? I think most browser take mime header over file extension :)
Solution 6 - Php
You can embed a png image like you can embed jpg images or any type of images in html from your device or from the web .
Be sure that the type of the image is png when you are saving it on your device.This is the same way but I embed it as jpg.<embed type="image/jpg" src="https://s3-us-west-2.amazonaws.com/textimgs/music/250px-Antonio_Vivaldi.jpg" width="500" height="500">
</EMBED>
I want to say thanks to Stack Overflow that let us ask and answer!!!!!!!!!!!!!!!!
Solution 7 - Php
You can embed images using the methods listed in other answers, such as in HTML
<img alt="My Image" src="data:image/png;base64,base64-data-goes-here" />
or CSS
div#my-image {
width:150px;
height:100px;
background-image:url(data:image/png;base64,base64-data-goes-here);
}
For Base64 encoding, on Linux I use the standard base64 tool with wrapping turned off, like this:
base64 -w 0 my-image.png
and copy/paste the output text verbatim.