Intro

I updated astro-ixmage to be able to work with cloudinary and sanity.io. (( More to come! ))

I implemented a “provider” model where you only need to implement and export a getImage(options) function and you should be able to incorporate any image cdn provider that has a querystring API.

Basis

I sorta went with the approach nuxt/image did.

---

Images in this post are using the astro-ixmage package

---

Installation

npm install astro-ixmage --save-dev

This is a build-time SSG component that will render out <img> tags on your generated site.

Usage

Import into your other components or pages
(or .md files using the setup field)

Setup of default values

You are required to create a file named ixmage.config.mjs in your project root folder. The file will be a sibling to astro.config.mjs

The file contents will be

export default {
  "provider": "ixmage"
};

where you can specify the default provider like ixmage or cloudinary, etc.

frontmatter setup

Astro Components

import { Ixmage } from 'astro-ixmage';

In your component body

<Ixmage token="your-token" src="https://image-url.format" alt="An optimized image" />

Markdown Files

setup: |
  import { Ixmage } from 'astro-ixmage';

In your markdown content

<Ixmage token="your-token" src="https://image-url.format" alt="An optimized image" />

Examples

The image used for demo (resized to 320px wide):

The original image is a JPG, dimensions of 1200x900 pixels, and 492 kB.

ixmage

My image accessed thru the ixmage service

<Ixmage cls="me-2" token="TQKkCpGYGK" w="200" h="200"
  bgc="_00ff00" flop={true}
  src="bucket1/demo/wall.jpg"
  alt="demo wall image"
/>

Result is 6.2 kB, and was turned into a WEBP for the Edge browser.

cloudinary

I uploaded the same image to my cloudinary account. Initally, it gave my image a name with an id, but I was able to rename it just “wall.jpg”

<Ixmage cls="me-2" token="batousai" width="200" height="200"
  provider="cloudinary" bgc="00ff00" crop="lpad" flop={true} 
  src="demo/wall.jpg"
  alt="demo wall image"
/>

Result is 7.5 kB, and was kept as JPG for the Edge browser.

sanity.io

I also uploaded the image to a sanity.io account. It gave it a cryptic name, and I could not change it. Also, I could not get the background color to work despite following their documentation.

<Ixmage cls="me-2" token="qg0lypr0" w="200" h="200"
  provider="sanity" bgc="ff00ff00" flip="h" fit="fill"
  src="4450124c33af1267f4def68cc220c7c0ffb56185-1200x900.jpg"
  alt="demo wall image"
/>

Result is 6.6 kB, and was turned into a WEBP for the Edge browser.

More examples

ixmage

<Ixmage token="TQKkCpGYGK" src="bucket1/demo/wall.jpg"
  w="200" pixelate="2"
/>

Result is 14.4 kB, and was turned into a WEBP for the Edge browser.

<Ixmage token="TQKkCpGYGK" src="bucket1/demo/wall.jpg"
  w="200" sepia="80"
/>

Result is 19.2 kB, and was turned into a WEBP for the Edge browser.

cloudinary

<Ixmage token="batousai" provider="cloudinary" src="demo/wall.jpg"
  w="200" pixelate="4"
/>

Result is 2.3 kB, and was turned into a WEBP for the Edge browser.

<Ixmage token="batousai" provider="cloudinary" src="demo/wall.jpg"
  w="200" sepia="80"
/>

Result is 5.8 kB, and was turned into a WEBP for the Edge browser.

Settings | Config

You are required to create file ixmage.config.mjs in your project root folder, or the component will fail complaining it cannot find the file.

The file contents can be export default {} but better to put in a default provider

export default {
  provider: 'ixmage'
}

This value will be used when you do not specify a provider="value" prop to the component.

srcset

Create a srcset for the image.

Provide a list of widths in a srcset prop like

srcset="200,500,1000,1200"

and the component will create a srcset entry for each width.

srcset does not play nice with height.

ixmage

<Ixmage token="TQKkCpGYGK" 
  src="bucket1/demo/wall.jpg" w="200"
  srcset="200,400,600,800" //1//
  alt="demo wall image" loading="lazy"
/>

cloudinary

<Ixmage provider="cloudinary" token="batousai"
  src="demo/wall.jpg" w="200"
  srcset="200,400,600,800" //1//
  alt="demo wall image" loading="lazy"
/>

sanity.io

<Ixmage provider="sanity" token="qg0lypr0"
  src="4450..-1200x900.jpg" w="200"
  srcset="200,400,600,800" //1//
  alt="demo wall image" loading="lazy"
/>

Conclusion

The getImage(options) implementation allows you to do some attribute/props checking, cleaning, or making more obvious or standardized.

It also passes along any “unhandled” attributes/props which you can include into the service querystring. You can take a look at the ixmage and cloudinary implementations to see 2 different approaches.

Package

What next

• Implement more providers.
• Have a srcset approach.

---

---

Back to Post List