A query about performance with 8000+ images

#1

The wiki I am working on for will have approx 8,000 images included in addition to many tiddlers of content. Is there any advice whether it is better to include the images, each in its own tiddler with a canonical_uri field pointing to the image stored externally or to use the HTML <img tag with lazy loading set to ‘yes’ as part of the content tiddler’s text field.

I am trying to make sure images are only loaded when visible in the display window rather than having to load each and all images at load time.

bobj

#2

Hi Bob,

My TW has a bit over 7K images, I keep them all external,

I set up my TW a few years ago, so there might be newer solutions, but I use ImportToExternalFile — 5.1.23 – from @saqimtiaz – to great success.

I use plain [img[./files/a.png]] type tags directly, with no problems,

image
image891×148 9.03 KB

(I also use a home-baked solution to paste from the clipboard directly to the files directory and copy the image tag text back to the clipboard, to paste directly into the tiddler.)

hth
Gabriel

#3

Lazy loading is only active, if you use a Node.js client / server configuration.

From my point of view, using canonical_uri is the way to go. – But @saqimtiaz is the one to ask, when images are involved :wink:

#4

On loading a single file wiki would it follow all the external images links and load them?

  • I expect so with image tiddlers? but not canonical links, once loaded they will stay in memory.
  • If someone points me to an example I can research.
#5

You are right. The server has to support it. So the service provider needs to have a configuration to enable image serving options. Which they usually do.

#6

I am wondering about this myself. After loading my photo library into one of my local wikis running node.js (41,000 images / external image tiddlers) … I couldn’t help but notice a subtle performance lag in CSS animations when opening and closing tiddlers, even ones unrelated to the photo library. Even with the performance instrumentation turned on, I am not really sure how to spot optimizations.

#7

It may depend on the sidebar tab, that you show. If you show eg: Recent, there may be a long list, which may take some time to be redraw.

Also if you show a “Dashboard” which contains complex filters and / or shows long lists of links, this may have a performance impact.

#8

@gabrielmontagne , Munster a follow up query.

Do you use a single file tw or node.js?

If single file, have you noticed any launch time degradation due to images being loaded at that time or do your images only load when their tiddler is being displayed?

Bobj

#9

@saqimtiaz , @pmario suggested you were the person most familiar with image handling in tw. Do you know when images are loaded via canonical_uri or via $image tag of html <img tag?

I want to ensure that 8000+ images are only loaded when their tiddler is being displayed.

Bobj

2 Likes
#10

Just thought I’d share some feedback.

After deft processing with BBEDIT and LibreOffice Spreadsheet with a template for the required JSON, I have created JSON files for all the images and have uploaded them into the prototype wiki. I stayed with all files in a particular state as a cohort for uploading but on dragging all JSON files into the wiki window, import went quickly.

I uploaded the wiki to a test server and on opening the wiki, noticed no noticible/concerning delays. As forecast by @pmario above, any lists with large numbers of entries show discernible delay in rendering. So the lesson here is, keep long lists to a minimum.

I settled on using external images accessed via a tiddler per image with a canonical_uri field with the URL for the image.

So, it all seems to work OK.

I thank everyone for their comments.

bobj

#11

I will just add to this thread that tiddlywiki can be concidered a webpage, even although there can be a lot more to it. Other websites have being dealing with images for a long time and there are solutions there. For example html code can be added to tiddlywiki page through raw tags. Within these it is posibly to cache images so after the wiki is loaded caching of images in a browser can take place in the background.

  • Exactly how to do this will be available out on the internet, for example I have done this in WordPress, others on top of html pages.
#12

Hey Bob, I use node, and, for my use case, I don’t really need tiddlers for each of my images. So I just [img[ them in from /files. I don’t, then, load them unless they become visible.