How do you insert a png file in html?

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.

asked May 11, 2010 at 0:01

0

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);
}

Or the

answered May 11, 2010 at 0:08

Nick CraverNick Craver

615k134 gold badges1292 silver badges1152 bronze badges

6

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.

answered Nov 4, 2012 at 4:57

DiamaxDiamax

1111 silver badge2 bronze badges

1

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

answered Dec 29, 2012 at 8:25

1

A quick Google search says you can embed it like this:

But you need a different implementation in Internet Explorer.

http://www.websiteoptimization.com/speed/tweak/inline-images/

answered May 11, 2010 at 0:09

juandopazojuandopazo

6,2072 gold badges25 silver badges29 bronze badges

2

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

answered May 11, 2010 at 2:46

Thomas WinsnesThomas Winsnes

1,9311 gold badge13 silver badges15 bronze badges

2

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.

I want to say thanks to Stack Overflow that let us ask and answer!!!!!!!!!!!!!!!!

answered May 12, 2021 at 14:10

1

You can embed images using the methods listed in other answers, such as in HTML

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.

answered Sep 18, 2021 at 9:00

Rick-777Rick-777

9,2755 gold badges33 silver badges49 bronze badges

How do I put an image in HTML in HTML?

The HTML tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image. The tag is empty, it contains attributes only, and does not have a closing tag.

Why are PNG images not working in HTML?

How do I embed a PNG?