@yoot/imgix

@yoot/imgix

Imgix adapter for yoot

Generate Imgix image URLs with a unified, chainable API focused on core transformations.

 

Installation

Node / NPM

npm install @yoot/imgix @yoot/yoot

Deno / JSR

import {yoot} from 'jsr:@yoot/yoot';
import imgix from 'jsr:@yoot/imgix';

Browser (importmap)

<script type="importmap">
  {
    "imports": {
      "@yoot/yoot": "https://cdn.jsdelivr.net/npm/@yoot/yoot/+esm",
      "@yoot/imgix": "https://cdn.jsdelivr.net/npm/@yoot/imgix/+esm"
    }
  }
</script>
<script type="module">
  import {yoot} from '@yoot/yoot';
  import imgix from '@yoot/imgix';
</script>

 

Quick start

Step 1. Register the adapter

import {registerAdapters} from '@yoot/yoot';
import imgix from '@yoot/imgix';

registerAdapters(imgix);

Step 2. Transform images

Initialize

Use the yoot function to build transformations:

import {yoot} from '@yoot/yoot';

// Without arguments
const preset = yoot();

// With image URL
const preset = yoot('https://assets.imgix.net/...');

// With an object
const preset = yoot({
  src: 'https://assets.imgix.net/...',
  alt: 'Alt text',
  width: 1024, // Optional: intrinsic width
  height: 1024, // Optional: intrinsic height
});

Get the transformed URL

const preset = yoot('https://assets.imgix.net/...').width(1024).format('webp');

const transformedUrl = preset.url;

Get responsive image attributes

Supports both JSX and HTML rendering via @yoot/yoot/jsx or @yoot/yoot/html.

import {yoot} from '@yoot/yoot';
import {defineSrcSetBuilder, getImgAttrs, getSourceAttrs} from '@yoot/yoot/jsx'; // Or '@yoot/yoot/html'

// Define transformation directives
const preset = yoot({
  src: 'https://assets.imgix.net/...',
  alt: 'Thumbnail',
})
  .width(200)
  .aspectRatio(1)
  .fit('cover');

// Derive <img> attributes
const imgAttrs = getImgAttrs(preset, {loading: 'lazy'});

// Derive <source> attributes
const sourceAttrs = getSourceAttrs(preset, {
  type: 'image/webp', // this helper modifies the format to webp
  sizes: '200px',
  srcSetBuilder: defineSrcSetBuilder({widths: [200, 300, 400]}),
});

return (
  <picture>
    <source {...sourceAttrs} />
    <img {...imgAttrs} />
  </picture>
);

Define presets (DRY)

// -- presets.ts --
import {yoot} from '@yoot/yoot';
import {defineSrcSetBuilder, withImgAttrs, withSourceAttrs} from '@yoot/yoot/jsx'; // Or '@yoot/yoot/html'

export const thumbnailPreset = yoot().width(200).aspectRatio(1).fit('cover');

// Define the base <source> attributes
export const getThumbnailSourceAttrs = withSourceAttrs({
  sizes: '200px',
  srcSetBuilder: defineSrcSetBuilder({widths: [200, 300, 400]}),
});

// Define the base <img> attributes
export const getImgAttrs = withImgAttrs({loading: 'lazy'});

// -- Usage --
import {thumbnailPreset, getImgAttrs, getThumbnailSourceAttrs} from '@/presets';

const thumbnail = thumbnailPreset({
  src: 'https://assets.imgix.net/...',
  alt: 'Thumbnail',
});
// Or thumbnailPreset.src('https://assets.imgix.net/...').alt('Thumbnail');

const imgAttrs = getImgAttrs(thumbnail);

const webpSourceAttrs = getThumbnailSourceAttrs(thumbnail, {
  type: 'image/webp', // this helper modifies the format to webp
});

const jpegSourceAttrs = getThumbnailSourceAttrs(thumbnail, {
  type: 'image/jpeg', // this helper modifies the format to jpeg
});

return (
  <picture>
    <source {...webpSourceAttrs} />
    <source {...jpegSourceAttrs} />
    <img {...imgAttrs} />
  </picture>
);

 

Resources

• 📘 Read the docs
• 🔍 View examples
• ⚙️ Available adapters

 

Demo

Try it live — zero setup:

 

Contributing

Found a bug or wish to contribute? Open an issue or send a PR.

 

License

Licensed under the ISC License.