How to handle images

While I was hosting on Vercel, I used the custom VercelImage component to render images. This component made use of Vercel’s image API, which is not available on Railway. I now use @sveltejs/enhanced-img, which is a Vite plugin and therefore cannot be used in a component library.

We have the following changes compared to the old behavior:

• Mdsvex Img has been eliminated in favor of enhanced:img, which needs to be configured in your project as a Vite plugin. Therefore, you cannot use standard Markdown syntax ![...](...) for images.
• VercelImage is still available. If you want to use it, you need to configure adapter-vercel.

It is recommended to not use enhanced:img directly in a Markdown file. The Vite plugin does a static analysis, which can trip up when you also have code fences in your Markdown file. Instead, create a Svelte component wrapper around enhanced:img:

And render it in your Markdown file:

<Figure caption="The market hall in Rotterdam." class="mb-6">
	<MarkthalImage />
</Figure>

Note that you can specify sizes in enhanced:img, which can result in smaller images being selected by the browser (if set correctly).

If you need to render an image with a different aspect ratio, you can add a class prop to the MarkthalImage component:

<Figure caption="The market hall in Rotterdam (16:9 aspect ratio)." class="mb-6">
	<MarkthalImage class="aspect-video object-cover" />
</Figure>