ImageKit - An Asynchronous Thumbs API

Plugins
1

I’m proud to release the first public beta of my ImageKit plugin for Kirby today. Although the plugin may seem simple at first glance, this has been a long ride. It started about 2 years ago, when I was using WordPress for my private blog. Unhappy with the built-in thumbnail API, I decided to go for something better. After the work on my WordPress plugin was almost done, I switched to Kirby and decided to start from scratch. The plugin grew very quickly and became some kind of monster, including everything from a widget to an extensive image component with support for lazyloading.

After the large amount of API changes, that came with Kirby 2.3.0, I had to adapt a lot of my plugin’s code to keep it working. So I took only the best parts of it and decided to go for a more modular approach this time. Today, I released the first component – the asynchronous thumbs API – on GitHub. I also decided to make ImageKit a commercial plugin, so I will hopefully be able to provide better support for it.

I’m excited to hear your feedback and hope you enjoy ImageKit!

ImageKit for Kirby CMS

ImageKit provides an asynchronous thumbnail API for Kirby.

WARNING: This software is currently available as a beta version. Be careful, if you use it in production, as it may still contain some bugs.

NOTE: This is not be a free plugin. In order to use it on a production server, you will need to buy a license once the final version is released. I’m still thinking about how much to charge for a license, but it will be easily affordable for anyone who can afford a Kirby license.

Current version: 1.0.0-beta1

Key Features

  • Image-resizing on demand: Kirby’s built-in thumbnail engine resizes images on-the-fly while executing the code in your template files. On image-heavy pages, the first page-load can take very long or even exceed the maximum execution time of PHP. ImageKit resizes images only on-demand as soon as they are requested by the client.
  • Security: A lot of thumbnail libraries for PHP still offer the generation of resized images through URL parameters (e.g. thumbnail.php?file=ambrosia.jpg&width=500), which is a potential vector for DoS attacks. ImageKit only generates the thumbnails whose are defined in your page templates.
  • Self-Hosted: Unlike many other image-resizing-services, ImageKit just sits in Kirby’s plugin directory, so you have everything under control without depending on external providers. No monthly fees. No visitor data is exposed to external companies. tl;dr: No bullshit!

The plugin will be extended by a responsive image component in the future with support for lazy-loading and placeholders (like on https://fabianmichael.de). These features will be released as a separate plugin, but you will only need one license to use ImageKit and the image component.

[…]

Full Readme and Download: GitHub

6 Likes
2

This looks great, all the features and options are very good especially the ‘Image-resizing on demand’. Great job, I’ve seen your source code and I will try very soon.

Thanks a lot

1 Like
3

I must admit, this plugin is wonderful!!, does its job well done, I tried on a development version of originalmockups.com and immediately I fell in love with ImageKit.

The solution to create a temporary file instead of an image is appropriate, I would have never thought.

The website is full of images and has support for Retina screens and this is in two different languages, then it is a good stage to do these tests, the overall performance of ImageKit plugin is excellent!

I would like to know when I could purchase the license.

1 Like
4

Hey @fenixkim,

thanks for trying out the plugin. I’m very glad to hear, that it works on larger scale. :smiley:

I have not set a final release date yet, because I wanted to give other developers an opportunity to test it in beta. There are still some things to do before the final version 1.0.0 will be released (documentation is not finished yet, I need to setup a license key generator and a checkout process etc.). The release date also depends on whether I decide to include the image component (frontend code and template helpers for lazy-loading, <picture>, srcset, etc. see images on https://fabianmichael.de for examples) in the first release. Though this image componenent will stay completely optional for developers, it is not really a problem to release it. My current plan is to release the final version of ImageKit within the next month. But like I said, there is no guarantee.

However, if it already works for your site without any bugs, feel free to use the beta without a license key in production until the final 1.0.0 is released. I will continue to post updates to this thread, so you will be informed about bugfixes and the release of 1.0.0-final! :sunglasses:

5

I think it’s great that this is a separate plugin because:

  • Not every site has the problem of image loading / caching.
  • A plugin can focus on one thing and do it well.
  • To have it as a plugin instead of the core have the benefit that this feature will no longer block the development of other core/panel/toolkit stuff.

You will not happend to know if your plugin will collide with built in future Kirby features? I mean, is there plans to try the non blocking thumb feature again at a future point of time?

I don’t hope so simply because I don’t think it’s worth the development time.

Anyway, it’s looking like you have done a great job at this thing. I will probably not use it because I don’t have an image heavy site but who knows. :slight_smile:

1 Like
6

You can never know for sure, what the future brings … but you might be right, that this is not needed by eveybody. If your site only contains few images, the regular thumbs API should be enough. Also, servers get faster and images should always be resized to a reasonable size before uploading. But for image-heavy pages (like portfolio websites or foodblogs) or sites on very cheap hosting (slow servers), ImageKit eases the pain of load times a lot. And like I stated above, this is only the first part of the plugin. :sunglasses:

Thanks for your feedback!

1 Like
7

Great little plugin, works exactly as advertised.

Regarding the lazy-loading extension: It would be awesome if it would just work with some 3rd party library like lazysizes, but I fear that’s not possible because lazysizes doesn’t wait for the thumbs to be generated when requesting them on pageload…

So looking forward to your custom solution.

Also, how does the widget work? It seems like only pages that I visited show up in the thumbnail queue, not all pages of the page. Is this intended behavior? Would be great if it would also allow for a “one click” thumbnail generation for all thumbnails acroll all pages.

8

Lazysizes does not care, if the image is already generated. It just requests the image file from the server and never knows, what the server does in the background to serve the image. So ImageKit should work with any Lazyloader. My image component uses Lazysizes BTW :wink:

I’m already working on this. Stay tuned for beta2 :smiley:

9

Lazysizes does not care, if the image is already generated. It just requests the image file from the server and never knows, what the server does in the background to serve the image. So ImageKit should work with any Lazyloader. My image component uses Lazysizes BTW :wink:

Yep, and that’s a problem because lazysizes will immediately return a 404 not found when requesting the thumbs that have not yet been generated.

I’m already working on this. Stay tuned for beta2 :smiley:

That’s great news, looking forward to it!

10

Not if the thumbs endpoint is a dynamic one that generates the thumb on the fly. :slight_smile:

11

I thought that’s what imagekit would do by itself. But in my tests lazysizes returned “failed” images instead of waiting for the image to be loaded/generated. Or am I getting something wrong here?

12

@Targoran: Does thumbnail generation work without lazysizes, i.e. with a plain <img> tag? ImageKit only handles thumbnail creation and does not provide any frontend code, so you have to write your own or wait for my companion-plugin called ImageSet to be released. ImageSet will provide simple template-tags for generating image elements with srcset-Attribute and <picture>-Elements. If thumbnails cannot be created at all, this might be related to a low memory limit setting in PHP. If you use the GD thumbs driver of Kirby (default setting), the maximum image size which PHP can handle depends on the amount of RAM available for the script.

If you need further help, please post your code, so I can hopefully help you to mark ImageKit work for you! :slight_smile:

13

Alright, quick update.
Seems like you’re totally right: imagekit works flawlessly when running locally – even in conjunction with lazysizes. The problem seems indeed to be a server problem on the live-server. While it does create thumbs via the widget, it does not generate thumbs when requested dynamically from the page.

I don’t have any server logs yet, but will investigate further. I think you might be right about the memory limit.

14

If Kirby’s built-in thumbs component does not exceed the capacities of your server, neither should ImageKit, because the plugin also uses the Thumb component of Kirby’s toolkit.

If your live server is running Apache, also check if the mod_spelling is enabled. In an earlier version of my plugin (never released, worked a little differently …), I had problems with with this Apache feature. Try to add CheckSpelling Off to your .htaccess file. I would like to hear from you if this helps.

Good luck! :slight_smile:

15

Yay! Beta2 is here! :tada:

ImageKit 1.0.0-beta2

Changelog:

  • Changed Job-File Suffix: Pending thumbs aka placeholder files aka job files now have a suffix of -imagekitjob.php instead of .imagekitjob.php. This fixes errors with Apache’s MultiViews feature (read explanation). You should clear your thumbs folder after upgrading.
  • Error Handling: ImageKit now tries it’s best to show you if there was an error in the thumbnail creating process. The widget is now able to display errors and if thumbnail creation failed, an error image is returned instead of nothing.
  • Discovery Feature: The widget now scans your whole site for thumbnails, so you don’t have to open every page manually.
  • Widget Code: The widget logic has been improved on both the server and the client side for better extensibility.
  • Widget UI: Added text underneath the progress bar to give the user a better understanding of what the widget is currently doing. Added animation while the progress bar is visible. If an operation is cancelled, Widget UI is now blocked until another operation can be started.
  • Permissions: The widget now shows an error message when the user has been logged out. The widget is now accessible for all logged-in panel users by default.
  • Refactoring: The whole plugin has been refactored here and there …

Get it from GitHub: https://github.com/fabianmichael/kirby-imagekit

5 Likes
16

Great update, Fabian!
I just installed the latest beta and and it now works like a charm.

Thanks for the effort!

17

ImageKit 1.0.0 is here

It took longer, than expected, but I finally released ImageKit 1.0.0! There are not many changes from beta2, so the plugin works pretty stable now.

Pricing & Licensing

The plugin is priced $ 25 excluding VAT (the final price will vary a bit, depending on country and currency). A license is valid for one website, bulk discounts are available. TL;DR: The licensing model works very similar to that of Kirby.

Where can I get it?

  • Plugin code and install instructions are available at GitHub
  • Licenses are available via FastSpring (purchase link is also included in readme.md)

I really hope this little Tool will help you, to build even greater websites with Kirby. Stay tuned for autumn/fall, as I am still working on a companion plugin for ImageKit, intended for generating responsive, lazy-loading images using HTML5 and JavaScript (i.e. doing the frontend work).

Have a great day and a nice weekend
Fabian

Changelog

  • 1.0.0 (2016/08/19)
    • Release! Initial version of the plugin is now final. Licenses are availabel at my store.
    • Bugfix: Fix handling of images that are located at the top-level of the content directory.
3 Likes
18

Next Step: Optimization

I’m currently thinking about the next step for ImageKit. Generating thumbnails asynchronously gives us a little more room for time-consuming operations, i.e. image optimization using command-line utilities. Although this increases thumbnail processing time, it can make a huge difference on image-heavy pages, when loaded over a slow connection.

I’ve been testing the following tools so far:

Do you use any image optimization tools? If so, which ones would you prefer?

1 Like
19

I’ve tried lots of png compression tools but no one of them made the images near the tiny size of:

The only thing I don’t like about is that it’s a service.

And yes, I’ve made a plugin for that as well:

https://github.com/jenstornell/Kirby-tinyThumb

I’m not sure if it still work.

Anyway, my point is if you will add png compression, try to find something that compress as good as tinypng if possible. Then I might even buy a copy, only for the compression thing.

20

TinyPNG uses posterization and converts 24-bit PNG files to 8-Bit PNGS. I have been able to achieve similiar results by using the Desktop apps ImageAlpha and ImageOptim. However, this requires some manual input. I think this process could be automated though. I’m just not sure, is posterization (basically limiting the image to a palette 256 colors) is great for every PNG your have, especially when dealing with photography. But who uses PNG images for serving photographs anyway?

JPEG images also profit from posterization, there is a great article on Smashing Magazine on this topic. However, this would require a special thumb driver, because I had to implement my own ImageMagick driver. Though this is not rocket science, I need to considerate carefully, which features are really needed. I might investigate into this at a later point, but for now, I think running tools like Jpegtran or OptiPNG on a thumbnail file after it has been generated is the next and most important step. I really would like to keep ImageKit as compatible with other plugins and the Kirby API as possible. Doing some lossless post-processing on thumb files is rather easy to implement and can still make a big impact on filesizes.

@jenstornell: Maybe TinyPNG could also be added as an optional optimizer in ImageKit. do they support image transforms/resizing etc. or should I upload my resized thumbnails to the service?