Is it better to host images externally rather than in TW for performance? [2020 update]

[talha131]

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:

1. TiddlyWiki performance degrades when its size increases, especially on mobile.
2. On NodeJS, use tiddlywiki --listen root-tiddler=$:/core/save/lazy-images
3. OR use relative paths for the images and store images outside the TW, but on your hard disk drive.

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?

​

[Mark S.]

I don't think there's any one recommended way to handle this. It may vary with your setup.

Since 5.1.20 improvements were made, so you don't have to worry quite so much about images deteriorating performance. However, it would still mean more time to synchronize or save, which could be important if you're connecting across the web. Also, just a few high quality images might still be too much.

Another possibility is to make thumbnails for your images and save them internally. Use a macro to display the images, and system information to decide whether to view the internal thumbnails or fetch the external image. That way you can view the images at low quality when offline or high-quality when online.

[bimlas]

Here are some of my own experience that can help. Although I wrote these in connection with the reference documents, they also apply to the images.

https://groups.google.com/g/tiddlywiki/c/EwD9TtppIOo/m/amYJ7nVTBQAJ

[talha131]

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.

​

[talha131]

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.

1. I uploaded images to an external host, pCloud.
2. I created image tiddlers inside TW and their `_canonical_uri` field to the image URL

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.