@giakki/responsive-adapter-ext

Custom adapter for responsive-loader

Usage no npm install needed!

<script type="module">
  import giakkiResponsiveAdapterExt from 'https://cdn.skypack.dev/@giakki/responsive-adapter-ext';
</script>

README

responsive-adapter-ext

Custom Sharp adapter for responsive-loader.

Installation

npm install --save-dev responsive-adapter-ext responsive-loader sharp

Usage

import { adapter} from 'responsive-loader-ext';

...

{
    test: /\.(jpe?g|png)$/i,
    loader: 'responsive-loader',
    options: {
        adapter,
    },
}

Supported operations

In addition to the standard operations supported by responsive-loader, this adapter supports resizing by aspect ratio and by height.

For example, starting with this reference image (512x512 pixels):

Original

Resizing and cropping by aspect ratio

require('lenna.png?resize=true&width=512&aspectRatio=7/5');

Image cropped by aspect ratio

Resizing and cropping by height

require('lenna.png?resize=true&height=100');

Image resized by height

License

MIT