imagepix client
Resize, crop and convert images dynamically using imagepix.
Links
Getting Started
Installation
npm install @imagepix/clientUsage
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
jpegpngwebpgif
Output
jpegpngwebpgif
License
imagepix client is licensed under a MIT License.
