I can host images on any free host online like Imgur and then use its link inside a tiddler. The drawback is that image won’t load if I am offline.
On the other hand, I can add an image to TW and reference it inside tiddlers. My notes will be self-contained. But I am not sure how it will affect the performance of TW. If it’s not a good idea to add images to TW, then the performance hit will become pronounced down the road.
People who have been using TiddlyWiki for long, what has been your experience in adding images to TW? What do you recommend?
I asked this question more than two years ago.
The consensus then was:
tiddlywiki --listen root-tiddler=$:/core/save/lazy-images
Now that two years have passed and TW has improved a lot, with several new features. What’s the status now? What’s the recommended way of adding images to TW?
Thank you, Mark and Bimlas.
I did a little digging into the documentation. What I understand, (which some user might find useful):
As long as you use TW with NodeJS and lazy load images, you are fine.
If you export the TW to a single HTML (which is how I guess most people use TW), then size would pose a problem. In which case, you can use externalimages
build target.
tiddlywiki ~/Dropbox/TiddlyNotes --verbose --build externalimages
This command extracts all the images into a separate folder and updates the image tiddlers’ _canonical_uri field. This way, the generated HTML file has a smaller size.
My take away from all this is that importing images into TW running on NodeJS is a non-issue.
An update, in case someone else stumbled on this thread.
My assumption that the number of images and image size does not matter if you are running TW from NodeJS turned out to be wrong.
I removed images from my TW, which reduced the size from 33MB to 6MB, that's about 80% reduction in size. The performance of TW, including animations, improved drastically.
First, I had removed only large images, i.e., images greater than 1MB in size. When I noticed the boost in responsiveness, I pulled all the images.
This way, my TW stays light and responsive, and I get the advantage of using images as tiddlers, like reusing an image in different tiddlers or using an image as an icon, or renaming an image tiddler.
I did not export the SVG images, but I did run them through an image optimizer to reduce their size.