remark-imagetools: Image scaling and manipulation in Markdown
Using Markdown within a svelte project is a really handy and easy way to edit a page and still have all svelte features available. The mdsvex integration comes with remark support allowing to add plenty of features so the force is strong with Markdown .
imagetools is another kind of great packages which allows to scaling and image manipulation while specifying an image URL. Here is a little example of it’s power:
<script>
import myimage from '$lib/images/myimage.jpeg?format=webp&w=150';
</script>
<img src="{myimage}"/>
Obviously this is just an exemplary snippet and you could use imagetools like this in your markdown pages as well. Personally I don’t like such code portions within my markdown pages. That’s to ugly for me. So I decided to write a plugin to encapsulate this step: remark-imagetools .
With this plugin you can provide all those settings for the images within the frontmatter or better as part of presets. Presets allow to use consistent settings across your project and if you need to do a change: You only need to update your presets.
You can find the documentation for this plugin on the gitub page: remark-imagetools .
Furthermore I created a project showing off several examples: remark-imagetools-example but if you like to follow along a basic setup demonstrating this plugin you can checkout the following video:
Feel free to let me know what you think about this project.