@islands/images v0.8.2

An îles module that configures vite-plugin-image-presets, allowing you to easily define presets to optimize and convert images:

• 🖼 define presets once, apply everywhere

• 🔗 use presets directly in img, source, and Picture

• 🖥 customize formats, srcset, & sizes

• ⚡️ on-demand in dev, cached at build time 📦

Demo 🖼 Source 💻

Configuration ⚙️

Add the module to iles.config.ts:

// iles.config.ts
import { defineConfig } from 'iles'

import images, { hdPreset } from '@islands/images'

export default defineConfig({
  modules: [
    images({
      thumnail: hdPreset({
        class: 'img thumb',
        loading: 'lazy',
        widths: [48, 96],
        formats: {
          webp: { quality: 44 },
          original: {},
        },
      }),
    }),
  ],
})

Usage 🚀

Use the preset query parameter to obtain an array of source and img attrs:

import thumbnails from '~/images/logo.jpg?preset=thumbnail'

expect(thumbnails).toEqual([
  {
    type: 'image/webp',
    srcset: '/assets/logo.ffc730c4.webp 48w, /assets/logo.1f874174.webp 96w',
  },
  {
    type: 'image/jpeg',
    srcset: '/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w',
    src: '/assets/logo.81d93491.jpeg',
    class: 'img thumb',
    loading: 'lazy',
  },
])

You can also use the src and srcset query parameters for direct usage:

import srcset from '~/images/logo.jpg?preset=thumbnail&srcset'

expect(srcset).toEqual('/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w')


import src from '~/images/logo.jpg?preset=thumbnail&src'

expect(src).toEqual('/assets/logo.81d93491.jpeg')

Images in Vue

A Picture Vue component is provided out of the box, which can receive any applied preset using the src prop, and renders a picture tag with the corresponding source and img tags.

<template>
  <Picture src="@/images/logo.jpg?preset=thumbnail"/>
</template>

Make sure to use an alias that starts with @, as Vue currently has a bug that does not transform certain relative imports.

Images in Markdown

The Picture component will be automatically used for any images in MDX, allowing you to use a preset while keeping the standard syntax:

![Landscape](~/images/mountains.jpg?preset=narrow)

Additionally, you can use markdown.withImageSrc to easily apply a preset to images referenced in MDX:

// iles.config.ts
import { defineConfig } from 'iles'

export default defineConfig({
  markdown: {
    withImageSrc (src, file) {
      // Example: If no preset was manually specified, use the `narrow` preset.
      if (!src.includes('?'))
        return `${src}?preset=narrow`
    },
  }
})

allowing you to keep the MDX cleaner:

![Landscape](~/images/mountains.jpg)