@ember-responsive-image/blurhash

Add support for BlurHash encoded Low Quality Image Placeholders (LQIP) to ember-responsive-images.

Compatibility

• Webpack v5
• requires using @ember-responsive-image/webpack

Installation

npm install @ember-responsive-image/blurhash @ember-responsive-image/webpack
// or
yarn add @ember-responsive-image/blurhash @ember-responsive-image/webpack
// or
pnpm add @ember-responsive-image/blurhash @ember-responsive-image/webpack

The setup of this package requires to add an additional script to your index.html. It is important to add this before your vendor.js script, especially when your app is served in a SSR setup using FastBoot or prember, so that the BlurHash encoded LQIPs are displayed before your app's JavaScript has loaded:

<script src="{{rootURL}}assets/blurhash.js"></script>
<script src="{{rootURL}}assets/vendor.js"></script>

Usage

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

Configuration

You have to setup BlurHash encoded LQIP globally by passing the lqip option to setupLoaders(), or opt-in on a case by case basis per import using query params. See the Webpack configuration options for details.

Examples

Global setup:

setupLoaders({
  lqip: 'blurhash',
});

// or

setupLoaders({
  lqip: {
    type: 'blurhash',
    targetPixels: 16,
  },
});

Per import:

import image from './image.jpg?lqip=blurhash&responsive';
// or
import image from './image.jpg?lqip={"type":"blurhash","targetPixels":16}&responsive';

License

This project is licensed under the MIT License.