Add scaled down images for image previews

My team has been noticing very slow loading of image previews, especially in the Kanban view, which is most likely related to the fact that all images are presented in their original quality (some are up to 4k), and not a scaled down version to save bandwidth and increase responsiveness.
This scaling process should likely be started as soon as the image is uploaded, and a solution to generate scaled down versions for existing images should be added as well.

Questions would be how the scaled down version should be inferred (maybe just adding a suffix to the preview file), and what resolution should be chosen for the preview. I’m happy to help out with the implementation if you can give me some pointers. Let me know what you think @kolaente :slight_smile:

I think we could do something similar to how uploaded avatars are scaled on the fly: vikunja/upload.go at main - vikunja - Gitea
To improve the performance, I think it would be a good idea to add predefined sizes for images, not allow freely selecting a size.

We’ll need to add some logic first to differentiate between different file types, to the api it’s all just file blobs.

I think this component in the frontend would be a good place to add this functionality at least from that side right? This handles which files are previewed or not already. vikunja/FilePreview.vue at 479b786761948b0a0427676c42e082e75579029c - vikunja - Gitea
Basically we’d change the blob download call in here to something else where we can request a scaled down version from the backend. And, yeah I would think images would always default to certain size dimensions?
Would you only generate the downscaled versions when they are specifically requested? It would add an extra delay at least for the first time of course.
Looking at the avatar upload, it seems like it’s cached in memory/redis depending on settings. Would using this cache be a good approach for this as well or couldn’t it end up flooding the cache?

I think we should start with that and see how much the delay really is. My assumption would be it still being pretty fast.

As for the cache, it should be fine as these previews usually are not huge in size.

1 Like

I’ve added a PR here :slight_smile: #2541 - Downscaled Image Previews - vikunja - Gitea