Img process on the fly vs thumb caching (watermarking and proofing)

Kirby 2 Questions 🤔
1

from another image script i’ve seen that while images get watermarked and small thumbnails are generated for listing in the gallery, the actual preview is a combination of javascript e.g. some zoom in after clicking on the preview image and php. where as the php part uses a few image functions to overlay the watermark and crop a part of the image and output it on the fly without caching.

u can think about it such as the focusCrop plugin just where a user clicks the image at any spot, the picture will crop on the fly and it’ll look as if zoomed in. a watermark will be applied on the fly as well. heres an example: http://demo.photostorescript.com/stock-photo/the-alexander-palace-7814.html

my attempts have always been putting pretty basic watermarking and resizing from 3500 px to approximately 1000 to 1400 pixel for preview, but while my current archive has about 20 gb of photos and i have had a complete run of thumbnails which also came up to about 2,x gb, other than the initial processing it works fine but eats alot of space. in addition it’s gonna create 100px mini thumbs here and there (once again… )

while i tested everything as far as i could on my locale server i am really wondering if my i7-ish lacks processing power or is just not made for localhosting - or prebuild server (laragon or uniserver is not very performing well) because compared to pages without images it feels very sluggish sometimes, even when all previews are already generated.

i thought to myself, if the attempt to generate a preview as described before makes sense. but every cropping preview action would require processing power as well. so i wonder if this will eat up resources… i haven’t really thought about how to get this one solved and couldn’t find anything javascriptish to solve the visual part.

so i want to throw in some kind of question / discussion …

my main concern is if images are processed on the fly e.g. clicking the image calls php image creation that it’ll quickly overload a server if a few users are browsing at the same time.

what are the best way to work with (alot) of images which need proofing… , in regards of user-friendliness, performance and safety (watermarked images)

2

May I ask you for what kind of project you want to build this?
Because this looks like a lot of unnecessary work both for you and the server

The link you provide in particular seems a very bad solution because they’re generating crops on the fly but looks like they’re using the crappy compressed thumbnail as a starting point because the result is blurred.

If you can give us a bit more context on what you want to build maybe we can help you find a better solution.
For watermarking this looks like a promising and interesting solution : https://www.exif.co/

3

similar to the link i provided it’s a project where a customer can browse through galeries of watermarked files, put them into a cart, and checkout. after an order has been placed and verified, he’ll gain access to the original not-watermarked version.

regardless of when and how, the server has to handle about 6000 images with 3500 px in a timely manner (time is of the essence). images after being uploaded and processed stay available (so thumbnails are ok)

my attempt so far has been:

original images in /content/store/kategory/subcategory/images.jpg
(while the original images are protected with htaccess deny all)
after going through some checkout and payment process an order will be created, and the customer is able to download their order (original files are basically called via $file->download())

thumbnails / watermarked images are saved seperately in thumbnail folder (thumb/store/category/subcategory/images.jpg) , so they are not affected by htaccess, as well as everything is a bit sorted.

while every part of application is working as intended, i am looking to make some improvements. the more automation is involved the better.

from the link i provided, i can tell that that script is creating 400 px previews as listing within category view, and the detailed 1 image page with the zoom in effect is using the original one but places the watermark on top of each crop (on the fly) - i actually bought that script a while back and had a look on the code. i can assure you this script is a mess…

the link you provided exif.co is no option as we are talking about too many images (and views) and it seems like it involves to manually copy and paste html from their service.

the point is, the thumbnail generation needs to be done only once (it needs to be done anyways) and even if there’s a picture getting added, it only has to process only that new one. i could generate thumbnails on localhost and upload thumbs + originals in one go, so at least the live server won’t get sweaty…

anyhow that’s exactly why i am looking for suggestions.

++ Edit ++
i notice that adding text vs adding watermark png is quicker in general but my approach ( Extend $image with $image->overlay() or $image->watermark() ) is limited to 100% opacity and the text is not wrapping around e.g. text not taking a new line when image corners has been reached.