imgix

The image processing capabilities of the imgix image CDN are supported by a helper function provided to you by this library.

Setup

Make sure you have the @responsive-image/cdn package installed:

npm

npm install @responsive-image/cdn

yarn

yarn add @responsive-image/cdn

pnpm

pnpm add @responsive-image/cdn

You need to specify your imgix domain in your configuration, which you can set up in your application (e.g. app.js):

import { setConfig } from '@responsive-image/core';

setConfig('cdn', {
  imgix: {
    domain: 'my-org.imgix.net',
  },
});

Usage

IMPORTANT

Please make sure you have read the section on remote images first.

Use the imgix provider function passing the reference to the image on the CDN and optional transcustom parametersformations, and pass the return value to the image component:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage @src={{imgix 'path/to/uploaded/image.jpg'}} />
</template>

Ember .hbs

<ResponsiveImage @src={{responsive-image-imgix 'path/to/uploaded/image.jpg'}} />

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg')}
    ></responsive-image>`;
  }
}

Solid

import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return <ResponsiveImage src={imgix('path/to/uploaded/image.jpg')} />;
}

Aspect Ratio

For the image component to be able to render width and height attributes to prevent layout shifts after loading has completed, it needs to know the aspect ratio of the source image. Unlike local images it cannot know this upfront for remote images, that's why it is recommended to supply the aspectRatio parameter if possible:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      '/path/to/image.jpg'
      aspectRatio=1.5
    }}
  />
</template>

Ember .hbs

<ResponsiveImage
  @src={{responsive-image-imgix '/path/to/image.jpg' aspectRatio=1.5}}
/>

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('/path/to/image.jpg', {
        aspectRatio: 1.5,
      })}
    ></responsive-image>`;
  }
}

Solid

import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        aspectRatio: 1.5,
      })}
    />
  );
}

Custom parameters

Besides the transformations that the addon itself implicitly adds (related to resizing images) you can add your own imgix parameters by passing a params object:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      'path/to/uploaded/image.jpg'
      params=(hash monochrome='44768B' px=10)
    }}
  />
</template>

Ember .hbs

<ResponsiveImage
  @src={{responsive-image-imgix
    'path/to/uploaded/image.jpg'
    params=(hash monochrome='44768B' px=10)
  }}
/>

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg', {
        monochrome: '44768B',
        px: 10,
      })}
    ></responsive-image>`;
  }
}

Solid

import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        monochrome: '44768B',
        px: 10,
      })}
    />
  );
}

Quality

Use the quality parameter to pass a custom quality setting instead of the default auto:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      'path/to/uploaded/image.jpg'
      quality=50
    }}
  />
</template>

Ember .hbs

<ResponsiveImage
  @src={{responsive-image-imgix 'path/to/uploaded/image.jpg' quality=50}}
/>

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    ></responsive-image>`;
  }
}

Solid

import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    />
  );
}

Image formats

By default, modern image formats (webp, avif) are referenced in the generated <source> tags. You can tweak that using the formats argument:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      'path/to/uploaded/image.jpg'
      formats=(array 'webp' 'avif')
    }}
  />
</template>

Ember .hbs

<ResponsiveImage
  @src={{responsive-image-imgix
    'path/to/uploaded/image.jpg'
    formats=(array 'webp' 'avif')
  }}
/>

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    ></responsive-image>`;
  }
}

Solid

import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    />
  );
}