Intro

I made a remark plugin for my astro markdown files, where a markdown image, as long as it’s eligible per the tests in the next section, it’ll be optimized by the ixmage service.

Image URL tests

A few tests are done to the image source url to determine if the plugin will act on it.

test for	optimize
Starts with //	Will be optimized
Starts with /	Will NOT be optimized
Starts with http	Will be optimized
Anything else	Will NOT be optimized

Plugin options

The plugin in its initial version (2022.06.02) has two configuration options

option	default	description
token	astro	The ixmage account token to use
optIn	false	Whether image optimization is done by default or should be opt-in per image

token

When you sign in for an account for the ixmage service, you get an account token, that is used as part of the CDN urls, and is used to identify your account.

This setting defaults to astro and can work without configuring this parameter.

optIn

This configuration option, when left as false, tells the plugin to optimize all applicable images (see tests above). If you set it to true, then you need to opt-in per image to apply the optimization thru the ixmage service.

By default, the plugin will wrap your image urls to use the ixmage service.

If you instead set this setting to true, then the optimization will only apply to images where you opt-in.

There is also a way to ignore images and skip the optimization, which is the way to go for instance for animated-gifs, which will fail optimization.

Setup

Grab the package

> npm install readonlychild/astro-ixmage

This should grab it from the github repo

Conclusion

Hope this brings some optimizations to websites near you, and encourages you to try out ixmage.com

Alternative example 2

![alt ixmage{"w":300,"h":300,"flop":true,"bg":"lime"}](https://images.unsplash.com/photo-1638613067237-b1127ef06c00)

is the same as

![alt](https://images.unsplash.com/photo-1638613067237-b1127ef06c00 '{"w":300,"h":300,"flop":true,"bg":"lime"}')

---

---

Back to Post List