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.