So I have a .png file. I am using windows OS. How can I embed my png file/image into (blank by default) file.html so that when you open that file in any browser you see that image, but the file is not anyhow linked to it - it is ebbeded into it?
Step by step instructions would be nice.
You need to link it somehow. You could set it as body's background with help of a little CSS.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2807251</title>
<style>body { background: url('/url/to/file.png') no-repeat; }</style>
</head>
<body>
</body>
</html>
There are a few base64 encoders online to help you with this, 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>" />
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/
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 :)