imgix.md

imgix

A provider helper for responsive-image for the imgix image CDN.

Usage

Please make sure you have read the main documentation first, especially the section on image providers.

This addon provides a {{responsive-image-imgix-provider}} helper for use with the <ResponsiveImage/> component:

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

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 hash:

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

Quality

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

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

Image formats

By default, all image formats supported by imgix (PNG, JPEG, WEBP, but no AVIF yet) are referenced in the generated <source> tags. You can tweak that using the formats argument:

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

Configuration

You need to specify your custom imgix domain in your app's config/addons.js file:

// config/addons.js
'use strict';

module.exports = {
  '@ember-responsive-image/imgix': {
    domain: 'my-org.imgix.net',
  },
};

License

This project is licensed under the MIT License.