Image [remote] optimization in your Markdown

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

astro.config

In your astro.config file, you need to import it like

// astro.config.js
import { defineConfig } from 'astro/config';

import ixmageOptimizerPlugin from 'astro-ixmage/ixmageOptimizer';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      'remark-gfm', 'remark-smartypants',
      [ ixmageOptimizerPlugin, { 
        token: 'your-token', 
        optIn: false 
      } ]
    ]
  }
});

and pass it along with the remark-gfm and remark-smartypants default plugins.

Options on an image

A normal markdown image is:

![Alt Text](image-source)

There is actually another variant I just found out about:

![Alt Text](image-source "Image Title")

Here is an image from unsplash

![Unsplash demo image](https://images.unsplash.com/photo-1638613067237-b1127ef06c00a "Image Title here")

Unsplash demo image

Because my astro site is using the remark ixmageOptimizerPlugin with these settings

[ ixmageOptimizerPlugin, { token: 'TQKkCpGYGK', optIn: false } ]

I don’t need to do anything special on my eligible markdown images. The image above is wrapped with the ixmage service and the following optimizations took effect

Because I use the Edge browser, the image was converted from image/jpeg (original format) to image/webp. Edge and most modern browsers support webp and the ixmage service can tell and will convert images to webp when appropriate.
The plugin+service will limit the image width to a maximum of 1200 pixels; perhaps I make this a configurable setting in the next version.
The resulting image is 24.6 kB
The image now resides in a CDN and will load faster going forward.

Opting out

Let’s now see the same image without optimizations:

![Unsplash demo image ixmage{"ignore":true}](https://images.unsplash.com/photo-1638613067237-b1127ef06c00)

We are declaring some plugin options inside the alt text part.

Because my site will optimize markdown images by default, I am opting out for this specific image by setting an “ignore” property to true inside an ixmage{} options object.

ixmage{"ignore":true}

Unsplash demo image ixmage{"ignore":true}

The image above has been opted out of optimization, and it results in the original 2.0 MB jpeg and is 4959 pixels wide.

Other options

List of available options to transform/optimize the image

option	description
w	Width
h	Height
bg	Background color for padding
q	Quality, 0 - 100
flip	Vertical mirror
flop	Horizontal mirror
gray	Turn grayscale

Specifying width

![alt ixmage{"w":300}](https://images.unsplash.com/photo-1638613067237-b1127ef06c00)

alt ixmage{"w":300}

Flopping

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

alt ixmage{"flop":true,"w":300}

Alternative syntax

Inspecting how another remark plugin was adding attributes to other node types, I found out about the alternative markdown image primitive:

![Alt Text](image-path "Image Title")

The above will end up as

<img alt="Alt Text" src="image-path" title="Image Title">

Alternative example 1

So I enabled the plugin to also accept these alternative syntax:

![alt ixmage{"w":300}](https://images.unsplash.com/photo-1638613067237-b1127ef06c00)

is the same as

![alt](https://images.unsplash.com/photo-1638613067237-b1127ef06c00 '{"w":300}')

alt

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"}')

alt

Conclusion

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

Back to Post List