Is it better to host images externally rathern than in TW for performance?

[talha131]

I can host images on any free host online like Imgur and then use its link inside a tiddler? Drawback is that image won’t load if I am offline.

On the other hand, I can add 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 down the road performance hit will become pronounced.

So, people who have been using TiddlyWiki for long, what have been your experience in adding images to TW? What do you recommend?

​

[@TiddlyTweeter]

Don't put more than a few images in a TW. Images can be large and they will degrade performance if you import many of them.

Its slightly different with SVG images as they are much more lightweight. Those you can have more of before hitting performance issues.

Overall, IMO, images actually IN the TW are best kept to the favicon and the buttons.

Real visual images like jpg and png are best kept externally. (BUT don't sweat about having a few).

IF they are you own images you can use relative addressing so they will work on or off-line.

Josiah

[talha131]

Thank you @TiddlyTweeter.

​

[Mark S.]

When you add  images to TW, it rapidly increases the size. TW is not index-driven and is size-sensitive. For me, TW becomes almost unusable around 10 megs on mobile devices.

The compromise is to put the images in a relative position to your TW file (in a subdirectory). Then address the image with a relative path: [img[mypath/myfile.jpg]].  This will work everywhere without bloating your TW. The problem is, that you have to set up the links manually. Ideally rather than a simple drag-and-drop.

-- Mark

[talha131]

Thank you Mark

The compromise is to put the images in a relative position to your TW file (in a subdirectory). Then address the image with a relative path: [img[mypath/myfile.jpg]]. This will work everywhere without bloating your TW.

Please correct me if I am wrong, this means when I am sharing my whole TW or a tiddler with anyone, I will have to ensure my images directory is also shared with them.

​

[Mark S.]

Yes. Easiest to do if you keep your images and TW file in the same directory (or images in a subdirectory). Then you can just zip the whole thing and pass it on.

-- Mark

[talha131]

Thank you again Mark.

I think I will stick with hosting images on external hosts. There are desktop tools available that upload image on a single click and then paste the direct link of the image to the clipboard.
As for being offline, it happens very rarely.

For now, it seems easier setup than to worry about directories, and making sure when sharing that the zipped directory does not contain images not intended for the other person.

​

[Mark S.]

Are you on windows? If so, what is your recommended image upload tool?

Thanks!!

-- Mark

[talha131]

I don’t use Windows much. But I have had good experience with ShareX.

On Mac, I use mac2Imgur.

Here is a list of tools that integrate nicely with imgur.

Finally, there is JumpShare which has cross platform support, and offers much more than image sharing. I stopped using it b/c its free account is limited and Imgur isn’t.

​

[TonyM]

Talah,

I am guessing you use of images is photographs or snapshots which are handled in the way this thread discusses.

Personally if I use photos in a tiddlywiki I simply apply the compression and sizing I would do on any website before placing them in the wiki.

However for most applications I personally use images for buttons or illustration and small pngs or regular svgs are what I use and I have not yet needed to externalise images.

With the next version of tiddlywiki or a future version of bob there will be a secure online node solution where it should be irrelevant the number and size of images in tiddlers however you will be able to download a single file offline tiddlywiki and this is when the size of the images will matter. 

I am also interested in the various diagramming and graphing tools as they also communicate graphically with a much lower byte requirement. The plugin is rarely as big as a single raster photo and can generate 100s of representations in the same space as a second raster image.

Perhaps we should all background the type and way we wish to use images in tiddlywiki rather than just "images" in general because they do have different tricks and treatments.

Regards

Tony

​

[talha131]

Right, mostly screenshots. I too make each image go through ImageOptim or sometimes change png to low quality jpg before using them.

With the next version of tiddlywiki or a future version of bob there will be a secure online node solution where it should be irrelevant the number and size of images in tiddlers however you will be able to download a single file offline tiddlywiki and this is when the size of the images will matter.

That’d would be interesting. I use tiddlywiki on NodeJS. Would love to get my hands on this feature.

​

[Mark S.]

You can supposedly use lazy loading with  the current node version of TW, and presumably the variants like Bob. Basically images get loaded only on demand.

-- Mark

[talha131]

Thank you Mark. I wasn’t aware of this feature. I have switched to lazy loading and hosting images inside TW. Let see how long until TW starts showing signs of stress. :)

​