69

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.

Improve this question
0

7 Answers 7

Reset to default
84

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>" />
Improve this answer
6
  • 1
    You're however dependent on the webbrowser used whether it will work flawlessly.
    – BalusC
    May 11, 2010 at 0:09
  • 1
    @BalusC - True, but that's what the question asked for...not any options except the normal external file route.
    – Nick Craver
    May 11, 2010 at 0:11
  • This does not seem to work for me in chrome.. :( Wondering if the base64 data is wrong.. :(
    – WORMSS
    Jun 20, 2013 at 14:16
  • 3
    Here's another website that'll let you encode an image file from your local hard drive (instead of from an URL): opinionatedgeek.com/dotnet/tools/Base64Encode
    – Jon Schneider
    Nov 25, 2015 at 15:27
  • 1
    For this to work you may need to define your charset in the HTML header e.g. <meta charset="utf-8"> (and make sure your base64 string is using the same charset!)
    – Kevin Sadler
    Apr 8, 2020 at 14:33
11

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.

Improve this answer
1
4

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.

Improve this answer
3

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
Improve this answer
1
  • 1
    An explanation would be in order.
    – Peter Mortensen
    Mar 7, 2021 at 16:20
1

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/

Improve this answer
2
  • 1
    Note that this will only work with small images. The larger the image, the larger the encoded string will get, and there's a limit to how long the src can be. And apart from that, it's uggly imho :)
    – Alec
    May 11, 2010 at 0:26
  • 1
    As I look at this in 2019, I don't think the limit is particularly low any more.
    – James A Mohler
    May 2, 2019 at 20:22
1

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 :)

Improve this answer
2
  • I know Firefox does that, while IE will look at the file itself.
    – Rangoric
    May 11, 2010 at 2:51
  • 1
    What if you're not using Apache? What if you're not using any web server at all (e.g. HTML email)?
    – Eric J.
    Jan 26, 2016 at 21:49
1

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!!!!!!!!!!!!!!!!

Improve this answer
1
  • 1
    While it's technically not wrong to use the <embed> tag, it's preferred to use the <image> tag instead.
    – shaedrich
    May 12, 2021 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.