Optimised Kirby Content Images

For some time it has been bugging me that I couldn’t add optimised images to Kirby’s textarea markdown. There’s been many times I wished that I could optimise those images to my liking.

At some point I added image resizing and optimisation to the file.create:before hook, but that only allowed to have one size and one setting for image compression. Because of the strict limitations, I didn’t like it much and removed it again.

I wanted some more flexibility and created a little KirbyTag plugin that extends the default image KirbyTag by a few options so it does what I want. It’s been a rather quick and dirty job, but does its job. I also added support for the new loading attribute that allows for native lazy-loading of images.

The plugin supports resizing by either width, height or both, an image compression and lazy-loading. Now I can simply add images with additional preferred options directly in the markdown field:

optimage: biarritz.jpg width: 1200 quality: 65 loading: lazy

Will output something like:

<img src=“source-img-1200x-q65.jpg” width="1200" loading=“lazy”>

The code can be found in this Gist on Github. If you like it or find it useful, feel free to use it and let me know what you think.

Also, if you are looking for a solution to add lazy-loading to your WordPress site, have a look at Tom Arnold’s approach, based on the initial snippet from CSS-Tricks.