embedding images in HTML with the data URL src

[Edward]

I have been doing some research about embedding images in HTML using
the data URL src method of the format:

<img src="/-/data:image/gif;base64,<DATA>">

My question is, how does one generate this <DATA> string? I have found
some on the web that I can load into my browser but if I save this
image and then view in Notepad it looks much different than the string
that I used in <DATA> and is full of non-alphanumeric symbols. Also, I
have saved this image as a BLOB into my database and this format is in
turn different from the two other. What gives?

Thanks.

Edward

[Jukka K. Korpela]

Edward wrote:

I have been doing some research about embedding images in HTML using
the data URL src method of the format:
Have you studied the specification of data: URLs and the browser support
to them?
<img src="/-/data:image/gif;base64,<DATA>">
Apparently not. And your markup isn't even valid.

Besides, even if you got it right, and even if browsers generally
supported it (say, in 2009), would it still be _useful_ to use it?
My question is, how does one generate this <DATA> string?

It's too early to ask that, since you haven't addressed the more
fundamental issues. Besides, it's not an HTML issue.

[Lachlan Hunt]

Edward wrote:

I have been doing some research about embedding images in HTML using
the data URL src method of the format:

<img src="/-/data:image/gif;base64,<DATA>">

My question is, how does one generate this <DATA> string?

http://software.hixie.ch/utilities/cgi/data/data

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Edward]

Jukka K. Korpela wrote:

Edward wrote:

I have been doing some research about embedding images in HTML using
the data URL src method of the format:
Have you studied the specification of data: URLs and the browser support
to them?

I am trying to learn all I can about the data: URL. Clearly I am not
yet an expert! But I hope to learn from others in this forum and in my
other research. I am trying to progress.

<img src="/-/data:image/gif;base64,<DATA>">

Apparently not. And your markup isn't even valid.

How so? I have been able to open images in browsers using this markup.
I found some good examples at:
http://delegate.org/delegate/sample/data-url.html.
Besides, even if you got it right, and even if browsers generally
supported it (say, in 2009), would it still be _useful_ to use it?

I hope so. I am not going to use it in the browser, per se, however.
I plan to use it to pass a parameter to Apache FOP to load an
external-graphic. I need to use a data: URL because the image
generation servlet is required to use HTTPS and FOP does not seem to
support HTTPS in an external-graphic.

My question is, how does one generate this <DATA> string?

It's too early to ask that, since you haven't addressed the more
fundamental issues. Besides, it's not an HTML issue.

I have found a web site to encode data to Base64
(http://makcoder.sourceforge.net/demo/base64.php) and a class that
someone wrote
(http://www.source-code.biz/snippets/...oder.java.txt). Using
both of these methods, I took the sample <DATA> from above (which
created the image in a browser) and then saved this image. I then used
the two methods here to try to recreate the <DATA>. The recreated
<DATA> was close but not the same as the original. I think that I must
be missing something obvious on how to create the Base64 data.

[Alexander Clauss]

Edward <ed**************@yahoo.com> wrote:

How so? I have been able to open images in browsers using this markup.
I found some good examples at:
http://delegate.org/delegate/sample/data-url.html.

Forget this page immediately.

The second example of this page (with the "/-/" prepended to the data
url) will result in the following:
The relative URL "/-/data:image/gif;base64,<data>" will be resolved
to "http://delegate.org/-/data:image/gif;base64,<data>" and then will be
send back to the server. The server now translates the "<data>" into a
GIF image and sends this image back to the browser which it can display.
In the first example (the real "data:" URL scheme) will result in the
following:
The URL "data:image/gif;base64,<data>" will be directly translated into
a GIF image by the browser and so can be directly displayed.

The differences is:
The second example needs more than the double amout of data that is send
to and from the server. And it is working only with the help
of the server, and only if the server is able to translate such
URLs. That means there must be a certain script installed on your server
in order to use this special URLs. And because of the doubled data
transmission you'll better use the ordinary way to embed images

It doesn't make any sense to prepend "/-/" to "data:" URLs.

--
Alexander

[Alexander Clauss]

Edward <ed**************@yahoo.com> wrote:

I have been doing some research about embedding images in HTML using
the data URL src method of the format:

<img src="/-/data:image/gif;base64,<DATA>">

^^^^
Remove this nonsense.

"data" URLs must begin with "data:" (like "http" URLs begin with
"http:"), because otherwise the whole thing is just an ordinary relative
URL which will be resolved using the base URL of the document itself.
That means instead of letting the browser deal with the "data" directly,
this will cause the browser to send the data back to the server. If the
server is not prepared for such a stupidity, you get only an error
message. If the server is able to translate the "data" of the "false"
data-URL into the real file format, it will send back the translated
data to the browser.

But of course. this is just a very stupid thing: you've more than
doubled the amount of data that is transmitted to and from the server.
And this won't work offline anymore, without a server that is
translating the data.

--
Alexander

[Jukka K. Korpela]

"Edward" <ed**************@yahoo.com> wrote:

I am trying to learn all I can about the data: URL.
But you apparently did not even read the description of their format.

> <img src="/-/data:image/gif;base64,<DATA>">

Apparently not. And your markup isn't even valid.

How so? I have been able to open images in browsers using this markup.

Apparently you don't even know what "valid markup" means.
I need to use a data: URL because the image
generation servlet is required to use HTTPS and FOP does not seem to
support HTTPS in an external-graphic.

Whatever that's supposed to mean, it's not about HTML authoring for the WWW,
hence off-topic for this group.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html