Hi!
I developed a plugin that can resize images on demand. Unlike Kirby’s build-in thumb() function, this plugin only resizes an image when it’s requested by the browser.
The plugin is mainly intended for responsive images with <picture> or srcset. I mostly developed websites with fluid widths nowadays, so images don’t have fixed pixel widths. With this plugin I can define a large amount of resized images to always provide the ideal image size. But not every resized image will be created on the initial page load. (Which can be quite slow and some of the images might not even be used.)
It works like this:
The plugin creates a URL to a resized image without creating the image itself. When the browser requests the image, a router catches the request, finds the original image, resizes it to the requested size with Kirby’s thumb() function and serves the resized image via a chunked readfile(). If the resized image already exists, it will be loaded like a regular image. Check out the README for more information and usage examples!
I’ve already used this plugin for two websites (one with many large images) that have been online for a couple of months. Overall, it works great, especially with lazyloading.
Note: The plugin has some (intended) limitations and is not meant to replace Kirby’s thumb() function.
Let me know what you think about it!