imagepix client

Resize, crop and convert images dynamically using imagepix.

Links

• TypeDoc

Getting Started

Installation

npm install @imagepix/client

Usage

Resize to fit

Get an imagepix url to resize image keep aspect ratio.

import { getResizeToFitUrl } from '@imagepix/client'
getResizeToFitUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  format: 'webp',
  quality: 80
}, { subdomain: 'demo' })

https://demo.imagepix.app/fit/300/300/webp/80/sample/landscape.png

When you set environment variable IMAGEPIX_SUBDOMAIN, you can also write following:

getResizeToFitUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  format: 'webp',
  quality: 80
})

Resize to fill

Get an imagepix url to resize and crop image.

import { getResizeToFillUrl } from '@imagepix/client'
getResizeToFillUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  format: 'webp',
  quality: 80
}, { subdomain: 'demo' })

https://demo.imagepix.app/fill/300/300/c/webp/80/sample/landscape.png

When you set environment variable IMAGEPIX_SUBDOMAIN, you can also write following:

getResizeToFillUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  format: 'webp',
  quality: 80
})

Resize to fill_pad

Get an imagepix url to resize image and fill background.

import { getResizeToFillPadUrl } from '@imagepix/client'
getResizeToFillPadUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  background: 'red',
  format: 'webp',
  quality: 80
}, { subdomain: 'demo' })

https://demo.imagepix.app/fill_pad/300/300/c/red/webp/80/sample/landscape.png

When you set environment variable IMAGEPIX_SUBDOMAIN, you can also write following:

getResizeToFillPadUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  background: 'red',
  format: 'webp',
  quality: 80
})

Supported format

Input

• jpeg
• png
• webp
• gif

Output

• jpeg
• png
• webp
• gif

License

imagepix client is licensed under a MIT License.