Images and html-export via data: ?

Images and html-export via data: ?

[Renzo Been :-)]

Hi,

It's been a while since I posted anything on
this list. I've just been using org-mode
happily for quite a while now, and am quite
contend with the way it's working for me now...

I do have one idea that I think might be useful.

Images (and small files) can be included inside
html files in the following way.

src="data:..."

The image needs to be base64 encoded.

Would there be an easy way to create an
org-command to include an image into the org
file in this manner?

Off-course their is a disadvantage here: images
included like this could only be exported to
html (not LaTeX). And the images must be quite
small in size, or the exporter might
fail. Another problem is that not all browsers
can display images included in this way...

I'll be glad to here any comments about this idea.

Ciao,
Renzo

Below is an example of how I'm using this
feature now:

-----

#
* Picture
#+BEGIN_HTML
<p><img src="data:image/png;base64,
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
SUVORK5CYII="></p>
#+END_HTML

Re: Images and html-export via data: ?

[Sebastian Rose]

Hi Renzo,


is that true? I can't believe it :-D

All those stupid JavaScript-preloader (for button rollovers) we all
write all the time. Just send both the images together with the html and
show/hide them onmouseover/out!

It's valid - and it works :-)


Haha - never seen this. Thank's for the hint!


Regards,

   sebastian


Renzo Been ":-)" <swangdoodles@gmail.com> writes:
> Hi,
>
> It's been a while since I posted anything on
> this list. I've just been using org-mode
> happily for quite a while now, and am quite
> contend with the way it's working for me now...
>
> I do have one idea that I think might be useful.
>
> Images (and small files) can be included inside
> html files in the following way.
>
> src="data:..."
>
> The image needs to be base64 encoded.
>
> Would there be an easy way to create an
> org-command to include an image into the org
> file in this manner?
>
> Off-course their is a disadvantage here: images
> included like this could only be exported to
> html (not LaTeX). And the images must be quite
> small in size, or the exporter might
> fail. Another problem is that not all browsers
> can display images included in this way...
>
> I'll be glad to here any comments about this idea.
>
> Ciao,
> Renzo
>
> Below is an example of how I'm using this
> feature now:
>
> -----
>
> #
> * Picture
> #+BEGIN_HTML
> <p><img src="data:image/png;base64,
> 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
> SUVORK5CYII="></p>
> #+END_HTML
>
>
>
> _______________________________________________
> Emacs-orgmode mailing list
> Remember: use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode
>

-- 
Sebastian Rose, EMMA STIL - mediendesign, Niemeyerstr.6, 30449 Hannover
Tel.:  +49 (0)511 - 36 58 472
Fax:   +49 (0)1805 - 233633 - 11044
mobil: +49 (0)173 - 83 93 417
Email: s.rose@emma-stil.de, sebastian_rose@gmx.de
Http:  www.emma-stil.de

Re: Images and html-export via data: ?

[Manish]

On Sat, Feb 7, 2009 at 11:19 PM, Renzo Been :-) wrote:
[...]
> Images (and small files) can be included inside
> html files in the following way.
>
> src="data:..."
>
> The image needs to be base64 encoded.

Very interesting.

>
[...]
> Another problem is that not all browsers
> can display images included in this way...

IE couldn't but FF did.

>
>
> I'll be glad to here any comments about this idea.

The encoded image size is about 2.5K while the rendered image turned out to be
about 1.8K.  But.. cute image! :)

Cheers
-- 
Manish

Re: Images and html-export via data: ?

[Renzo Been :-)]

To follow up on the topic:

I also experienced that IE did not show the images. Firefox does show them.
That's actually how I found out about this trick. Firefox is using the

src="data:..."

inside it's bookmark file...

Abiword also uses it in it's html export.

And email messages that include images, also include them in a similar way.

I have been using

src="data:..."

inside the following html tags

<a href...> (include .zip or .html files)
<img ...> (all images)
<iframe ...> (include .zip .txt or .html files)

and also to include javascript (as base64) into the html code:
<script type="text/javascript" src="data:..."></script>

Ciao,
Renzo

Re: Images and html-export via data: ?

[Carsten Dominik]

Seems to me that this could be a nice add-on package, which would  
encode and insert such images.

- Carsten

On Feb 7, 2009, at 6:49 PM, Renzo Been :-) <swangdoodles@gmail.com> <swangdoodles@gmail.com 
 > wrote:

> Hi,
>
> It's been a while since I posted anything on
> this list. I've just been using org-mode
> happily for quite a while now, and am quite
> contend with the way it's working for me now...
>
> I do have one idea that I think might be useful.
>
> Images (and small files) can be included inside
> html files in the following way.
>
> src="data:..."
>
> The image needs to be base64 encoded.
>
> Would there be an easy way to create an
> org-command to include an image into the org
> file in this manner?
>
> Off-course their is a disadvantage here: images
> included like this could only be exported to
> html (not LaTeX). And the images must be quite
> small in size, or the exporter might
> fail. Another problem is that not all browsers
> can display images included in this way...
>
> I'll be glad to here any comments about this idea.
>
> Ciao,
> Renzo
>
> Below is an example of how I'm using this
> feature now:
>
> -----
>
> #
> * Picture
> #+BEGIN_HTML
> <p><img src="data:image/png;base64,
> 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
> SUVORK5CYII="></p>
> #+END_HTML
>
>
>
> _______________________________________________
> Emacs-orgmode mailing list
> Remember: use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: Images and html-export via data: ?

[Renzo Been :-)]

Carsten Dominik <dominik <at> science.uva.nl> writes:

> 
> Seems to me that this could be a nice add-on package, which would  
> encode and insert such images.
> 
> - Carsten

Yes, making it an add-on package would be the best way. Then everyone can chose
to use these image commands or not...

If there is someone on the list who could create such a package... That would be
great!

Or I could try and write it myself. But I must admit that my knowledge of
writing elisp code is pretty limited...

One way to do this would be a mechanism equal to "Include files".

So:

#+INCLUDE: "~/.emacs" src emacs-lisp

(from the org manual)

Would turn into:

#+INCLUDEPIC: "~/foo.jpg" jpg

The extra parameter would be needed to determine the file-type of the image. And
possibly there could be more extra parameters for things like: image alinement,
and including a caption. 

And during html export the above would then turn into:

<p><img src="data:image/jpg;base64,
base 64 encoded text of ~/foo.jpg
"></p>

To me this seems a nice way to implement this command. But I really would not
know how to start writing this up into an add-on package...

Ciao,
Renzo