Embedding images

870 views
Skip to first unread message

Roger Ramjet

unread,
Jan 17, 2008, 10:20:53 AM1/17/08
to TiddlyWiki
I have seen the www.tiddlytools.com attempt to embed images in
tiddlers. This doesn't work on IE (or not so well). Here is my
question, has anyone tried the javascript method http://www.bennherrera.com/EmbeddedImage/
? It works with IE (and yes, there are drawbacks). Does anyone have a
better solution for IE? Thanks.

Eric Shulman

unread,
Jan 17, 2008, 4:33:53 PM1/17/08
to TiddlyWiki


On Jan 17, 7:20 am, Roger Ramjet <Chris.Ramp...@gmail.com> wrote:
> I have seen thewww.tiddlytools.comattempt to embed images in
> tiddlers. This doesn't work on IE (or not so well). Here is my
> question, has anyone tried the javascript methodhttp://www.bennherrera.com/EmbeddedImage/
> ? It works with IE (and yes, there are drawbacks). Does anyone have a
> better solution for IE? Thanks.

This script is yet another instance of the "single-pixel table"
solution, with an optimization for using RLE (run-length encoded)
compressed data to reduce storage and processing overhead.

It's not a bad technique but, as you noted, there are "drawbacks".
Even the documentation found at the above URL makes note of the
following serious limitation:
Image size must be kept fairly small if you don't have truly sparse
data, as the 2nd example does. Unless the target machine is fairly
beefy,
you don't want to go over 128x128 in most cases. 64x64 images
unpack
pretty quickly whether or not the data is sparse.
and the demo image they present takes several *seconds* to render!

In TiddlyWiki, AlanHecht's InsertSmiley plugin (*) applies a similar
technique, using "single-pixel CSS layout" instead of a table to
render the pixels. Even though this plugin lacks the RLE compression
that the above script provides, InsertSmiley works fairly well, mostly
because the smiley images are VERY small; however, for larger images,
this technique gets exceedingly slow and becomes impractical when
displaying more than one (or maybe two) moderately-sized images.

(*) ref:
http://www.personal.psu.edu/ach12/tiddlywiki/extensions.htm#%5B%5BInsertSmiley%20(TW%202.0%20compatible)%5D%5D

HTH,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

drleidig

unread,
Jan 22, 2008, 2:36:17 PM1/22/08
to TiddlyWiki
Maybe you are already aware of the fact that FF and Opera support
data-URLs.
So this tiddler gives you a nice embedded animated picture (no
linebreaks in the URL)

<div title="Ant" modifier="Torsten" created="200801171110" alias=""
changecount="1">
<pre>&lt;html&gt;&lt;img src=&quot;data:image/
png;base64,R0lGODlhSwAyAPIAAAAAADMzM2ZmZpmZmczMzMzMzAAAAAAAACH5BAkIAAUAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAASwAyAAADZVi63P4wykmrvTjrzbv/
YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QECFKVUynTGyBoF1yt1/
nIDDoJrkDAEDgJKTVg7ZADShnCQE124ycr59ofGdVhDMJACH5BAkIAAUALBYAHwAOABEAAAMuWFpE
+wzK5WKdtU3VxtjLEACDNg1A+m3ECAjX06WkCbUqSKBAfDM+kHBILBoVCQAh
+QQJCAAFACwWABoACwARAAADLFi6tErtOVmia3hWOKAmQdBNxAAAQjWZQKBVJ2A94DlcVdB6K/
r
+wKBwuEgAACH5BAkIAAUALBYAFQAIABEAAAMnWFSsvK85AtUalY4hywACZQkAwEFByTUkEEBEKzheOUvD2+187/
MJACH5BAkIAAUALBYAFAAMAA0AAAMoWLpKzM69FZssZAxBOiQCAAwYBYrjpQwopxJooC4BEJAThs8Tn/
+/BAAh
+QQJCAAFACwXABAADQAPAAADKVi6S8TwPcgkrdPhIYKmBCBazBCI3qQMxDmqyyACw6UAgWA38O7/
QGACACH5BAkIAAUALBkACwAMABAAAAMpWLq0/
vCRVqazjcpq4wBCBQ0BqCnTBwRRIQBgRJTAAE106Jnt1f/
AVgIAIfkECQgABQAsHAAGAAkAEgAAAyhYWrTOqzkpFWkV3htHENUVAEE2ACTHCGgQFSwAOiMwmPJj6Xzv/
74EACH5BAkIAAUALBsAAwALABAAAAMrSLW6Tk21F6crZMCLMwjbRQgAIHDLUAKaSASlID3qZ2EFHKBMy//
AoHCYAAAh
+QQJCAAFACwWAAAAEAAOAAADKVhK2v6FwbmihXKRjOMIwkBpA2AGw0YRgQmg49aesUePFsNNO
+7/QEgCACH5BAkIAAUALBMAAAAPAAsAAAMmWEWr/o/IBhcjIt
+qRgBAEEhMhIHgyC0CCgzr5amrUtbOhO
+8kgAAIfkECQgABQAsDwAAABAACQAAAyNYRTXECqpJRABBCEnfACAoTORTXeFAlouWrfCzwDRH33g
+JQAh
+QQJCAAFACwJAAAAEQAHAAADIFikSz6ryCmdCAHkQDsBYAhElEMMGzZ4Tet0cDWRcd0lACH5BAkIAAUALAUAAAARAAgAAAMkWKrE1CvKIQIIcj0igL
+QxnRfEDrjFQxn9gxs8WRM3UqzTC8JACH5BAkIAAUALAMAAAAPAA0AAAMqWLrcTsRJEoKQbIAdX9FbUHQMFIRkQwgoNg7VkC7QCM0KGeEer7olYCEBACH5BAkIAAUALAMAAQAMABAAAAMoWLrc/
jA2UgYQ1JEAwHhE50FCNxDZQpRXylgjCaAaSrvKDWW4yoOPBAAh
+QQJCAAFACwFAAUACQAQAAADJ1i63P5wjeFIAKKQRQAIxKZ1XsZcmCZ5IGdhokoIQ8jYqoLHOnczCQAh
+QQJCAAFACwGAAkACwAQAAADKFi63P4wLkJKbQME6gTQF5N9gjURwQeUDUpyDOFVoUXdT1grdLQ7lwQAIfkECQgABQAsCAANAA8ADQAAAydYutz
+MD4iG40BiKGuBaBGeI0QapwzEEMGriRDCMHWxQuFy3clXwkAIfkECQgABQAsCwAQAA8ADQAAAylYutz
+kMBG6lQDAHFL1oHlEB84iEwlaJs0DUEgSO5zFnS9uOhFd7tFAgAh
+QQJCAAFACwOABIAEQAMAAADKVi63P6wkQgnXUIMwqkAYBBYFWgK3EQuQ2ACaNExKTHca6XO18L3MkUCACH5BAkIAAUALBMAFAARAAwAAAMpWLrc/
vCRKCctIogxrQRgEHiQAIZEChHZyRWkohaDsMlxk
+YS7F86RQIAIfkECQgABQAsGAAWABEADAAAAypYutz
+sJHoCBlqQiJAEJb2EEBZgqIzBKYXbgL7FZNVZQNGZVq68z
+GJgEAIfkECQgABQAsHAAYAA8ADgAAAytYutz
+UJG4yJh0ABAw1JtQeIwVbIBAOic3jBDRrg5BqHY8TnzUUxVgSZEAACH5BAkIAAUALCAAGgAMABAAAAMpWLrc/
pCRGQMI1FkgSPMCcHnfIAJZE3LQYA1pMU0dRMbLHCk3Ke2yRgIAIfkECQgABQAsIgAdAAoAEAAAAyhYutz
+8JERRCGMAjDwIhvgfVswYiBgMkRqjgUVDCzawlcOe3j7RaMEACH5BAkIAAUALCMAIQAIAA8AAAMmWLrc7mMUosgAYFAlcNjFBQiTIgbSRAQYGAIfQwjaRlBu6d7VsicAIfkECQgABQAsIwAkAAgADgAAAyJYutz
+cJA1BwCzEBLuWNa1VVfwacIlMGmwKZsggdOrwUwCACH5BAkIAAUALB0AKAAOAAoAAAMhWLrc/
jAyImmh1uERgmhEyAFkkF3EQK6fEl5BaUKpgGUJACH5BAkIAAUALBkAJwAQAAsAAAMoWEra/
oXBGSt9JFusyxgSlQ1BIIRTFgCACYoCywoXM8gACqmlzkW6BAA7
&quot;&gt;
&lt;/html&gt;</pre>
</div>


On 17 Jan., 22:33, Eric Shulman <elsdes...@gmail.com> wrote:
> On Jan 17, 7:20 am, Roger Ramjet <Chris.Ramp...@gmail.com> wrote:
>
> > I have seen thewww.tiddlytools.comattemptto embed images in
> > tiddlers. This doesn't work on IE (or not so well). Here is my
> > question, has anyone tried the javascript methodhttp://www.bennherrera.com/EmbeddedImage/
> > ? It works with IE (and yes, there are drawbacks). Does anyone have a
> > better solution for IE? Thanks.
>
> This script is yet another instance of the "single-pixel table"
> solution, with an optimization for using RLE (run-length encoded)
> compressed data to reduce storage and processing overhead.
>
> It's not a bad technique but, as you noted, there are "drawbacks".
> Even the documentation found at the above URL makes note of the
> following serious limitation:
>    Image size must be kept fairly small if you don't have truly sparse
>    data, as the 2nd example does.  Unless the target machine is fairly
> beefy,
>    you don't want to go over 128x128 in most cases. 64x64 images
> unpack
>    pretty quickly whether or not the data is sparse.
> and the demo image they present takes several *seconds* to render!
>
> In TiddlyWiki, AlanHecht's InsertSmiley plugin (*) applies a similar
> technique, using "single-pixel CSS layout" instead of a table to
> render the pixels.  Even though this plugin lacks the RLE compression
> that the above script provides, InsertSmiley works fairly well, mostly
> because the smiley images are VERY small; however, for larger images,
> this technique gets exceedingly slow and becomes impractical when
> displaying more than one (or maybe two) moderately-sized images.
>
> (*) ref:http://www.personal.psu.edu/ach12/tiddlywiki/extensions.htm#%5B%5BIns...

Eric Shulman

unread,
Jan 22, 2008, 4:33:28 PM1/22/08
to TiddlyWiki
On Jan 22, 11:36 am, drleidig <torsten.lei...@googlemail.com> wrote:
> Maybe you are already aware of the fact that FF and Opera support
> data-URLs.
> So this tiddler gives you a nice embedded animated picture (no
> linebreaks in the URL)

Roger wrote:
> > I have seen the www.tiddlytools.com attempt to embed images in
tiddlers. This doesn't work on IE

He is referring to these plugins:
http://www.TiddlyTools.com/#AttachFilePlugin
http://www.TiddlyTools.com/#AttachFilePluginFormatters
which converts binary data into base64-encoded text that is stored in
tiddlers, and can then be used by simply using that tiddler name in
place of the external path/file that is normally part of the image and
external links wiki syntax. Thus: [img[TiddlerName]], where
"TiddlerName" refers to the 'attachment tiddler' that contains the
base64-encoded data generated by the plugin.
Reply all
Reply to author
Forward
0 new messages