# Image API

The Image API works via query string parameters.

In order to request images of the correct width, height or processed in other ways, you simply add the relevant parameters to the URL. For example, to stretch an image to fill a 200 x 200 pixel box, you would use a URL like this: `https://yourdomain.libpx.com/my-images/avatar.jpg?width=200&height=200&mode=stretch`.

Each parameter is described below. You can specify the parameters in any order.

### Width <a href="#width" id="width"></a>

Specifies the width of the output image in pixels.

If this value is omitted or set to 0 (default) its value will be automatically calculated based on the supplied [height](https://libpixel.com/docs/#height) value, so that the original image aspect ratio is preserved. If neither width nor height is defined, the original image size is used. And if both width and height are supplied, the image will be resized according to the [mode setting](https://libpixel.com/docs/#mode).

While there is no maximum value for width, the output image will not exceed 6 megapixels (\~2508x2508 if the image is a square). If the output image would exceed the limit, it will be scaled down automatically to the largest supported size.

### Height <a href="#height" id="height"></a>

Specifies the height of the output image in pixels.

If this value is omitted or set to 0 (default) its value will be automatically calculated based on the supplied [width](https://libpixel.com/docs/#width) value, so that the original image aspect ratio is preserved. If neither width nor height is defined, the original image size is used. And if both width and height are supplied, the image will be resized according to the [mode setting](https://libpixel.com/docs/#mode).

While there is no maximum value for height, the output image will not exceed 6 megapixels (\~2508x2508 if the image is a square). If the output image would exceed the limit, it will be scaled down automatically to the largest possible supported size.

### Mode <a href="#mode" id="mode"></a>

Controls the resize mode when both a [width](https://libpixel.com/docs/#width) and [height](https://libpixel.com/docs/#height) are specified.

Available modes:

* `fit`: Resize to fit within the boundaries defined by the `width` and `height` parameters, while maintaining the original aspect ratio. If the output aspect ratio differs from the original, only one of the dimensions (width or height) will equal its set value, while the other will be smaller.
* `crop`: Resize to fill the entire area defined by `width` and `height`, by maintaining the aspect ratio, but possibly clipping part of the image.
* `stretch`: Resize to fill the entire area defined by `width` and `height`, by modifying the aspect ratio.

The default mode is `fit`.

<div align="center"><img src="https://libpixel.libpx.com/test/dusk.jpg?width=240&#x26;height=240&#x26;mode=fit&#x26;dpr=1" alt="mode=fit"></div>

<div align="center"><img src="https://libpixel.libpx.com/test/dusk.jpg?width=240&#x26;height=240&#x26;mode=crop&#x26;dpr=1" alt="mode=crop"></div>

<div align="center"><img src="https://libpixel.libpx.com/test/dusk.jpg?width=240&#x26;height=240&#x26;mode=stretch&#x26;dpr=1" alt="mode=stretch"></div>

### Crop <a href="#crop" id="crop"></a>

Allows you to specify which part of the image is used.

To crop an image, you specify four parameters – the origin x and y (which defines the top left of the crop rectangle) and the dimensions w and h (which define the size of the rectangle).

Cropping is applied before other transformations. In particular, the crop values refer to the dimensions of the image before it has been resized. Note also that resizing may cause additional cropping of some part of the image if `mode=crop` is used.

The default mode is `fit`.

![No Crop](https://libpixel.libpx.com/test/plant.jpg?width=240\&height=240\&mode=crop\&no%20crop\&dpr=1)

![Crop = 100,100,1000,1000](https://libpixel.libpx.com/test/plant.jpg?width=240\&height=240\&mode=crop\&crop=100,100,1000,1000\&dpr=1)

![Crop = 500,500,1000,1000](https://libpixel.libpx.com/test/plant.jpg?width=240\&height=240\&mode=crop\&crop=500,500,1000,1000\&dpr=1)

### DPR <a href="#dpr" id="dpr"></a>

Specifies the device pixel ratio, between `0.1` and `10.0`.

Acts as a multiplier for both the width and height. For example, using `width=320&height=150&dpr=2` is equivalent to `width=640&height=300`.&#x20;

This allows you to easily specify an image with the correct resolution for high dpi devices such as iPhones.

The default DPR is `1.0`.

![DPR = 0.75](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i3ooy-SfDH7ibtuLx%2Fimage.png?alt=media\&token=3a473756-3cdc-4887-b22e-e544abedf15c)

![DPR = 1.0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i3sWt7TRnmdD1V6TS%2Fimage.png?alt=media\&token=579668f3-b221-4891-a914-ef6011dd6c2a)

![DPR = 2.0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i3yMFkS6e5FFzgbxH%2Fimage.png?alt=media\&token=9baddf5a-fa06-45d5-b97e-f89842796f1c)

### Blur <a href="#blur" id="blur"></a>

Blurs the image by a value relative to the image size, between `0` and `100`.

The maximum blur radius (r) in pixels which corresponds to a blur value of 100 is calculated using the following formula for the image width (w) and height (h):

For a 640x480 pixel image, a blur value of 100 translates into a blur radius of 80 pixels.

This guarantees that the same blur value will result in the same level of blurriness for the same image at different sizes.

The default blur value is `0` (no blur).

![Blur = 0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4MErcRPGgOtqbF4x%2Fimage.png?alt=media\&token=767eff52-474a-4e44-9005-1585b0c272ff)

![Blur = 5](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4S2wBmYK3WGjFiiW%2Fimage.png?alt=media\&token=3395038b-978c-4486-b223-7a8cc06f5362)

![Blur = 50](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4WYO7rMaVuwgvAl7%2Fimage.png?alt=media\&token=5d4cea4d-8754-49dd-b2fe-107244211a07)

### Brightness <a href="#brightness" id="brightness"></a>

Adjusts the brightness of the image, with values between `-100` and `100`.

The default value is `0` (no brightness adjustment).

![Brightness = -15](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4dw_0E-ahQRihtOq%2Fimage.png?alt=media\&token=9b08340c-686b-4465-9d46-a3f1a5a09ad5)

![Brightness = 0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4i-yQpRcvkN45Tc2%2Fimage.png?alt=media\&token=1a914cf3-78fb-4c90-aa1a-40b6a9a3f11b)

![Brightness = 15](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4mB5qzB2VBMSle1A%2Fimage.png?alt=media\&token=73beb723-241c-4436-b779-abc01e1729c9)

### Contrast <a href="#contrast" id="contrast"></a>

Adjusts the contrast of the image, with values between `-100` and `100`.

The default value is `0` (no contrast adjustment).

![Contrast = -20](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i4vMzY4JFtucC5jXr%2Fimage.png?alt=media\&token=bbb33688-b8de-43cb-be5a-840e83e3bc13)

![Contrast = 0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i5-FZciOVbiovJVYu%2Fimage.png?alt=media\&token=fc022730-b133-436c-af7f-602b7344f2fc)

![Contrast = 20](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i52lz6K04nQFy88BC%2Fimage.png?alt=media\&token=75c93a9c-958e-4fe8-a8e1-589e70f2a42b)

### Hue <a href="#hue" id="hue"></a>

Adjusts the hue of the image, with values between `-100` and `100`.

The default value is `0` (no hue adjustment).

![Hue = -80](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i5fB39QIiAJVlied7%2Fimage.png?alt=media\&token=12a42c0a-5b47-457a-a7e1-7f2c6615c754)

![Hue = 0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i5mNZF28UjcWadJA3%2Fimage.png?alt=media\&token=09a12d1a-53f2-4c37-99f6-a2bf3d7e60be)

![Hue = 70](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i5z2sLDkVW6cZskLn%2Fimage.png?alt=media\&token=f6e774cc-7b03-415b-b6f2-c5a848a61802)

### Saturation <a href="#saturation" id="saturation"></a>

Adjusts the saturation of the image, with values between `-100` and `100`.

A saturation value of `-100` turns the image into grayscale.

The default value is `0` (no saturation adjustment).

![Saturation = -100](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i6GBCZ7DeV_tfR7Qz%2Fimage.png?alt=media\&token=c353292b-4cf1-493b-98ca-b5e397c2680e)

![Saturation = -60](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i6e0tkAZhbVx1-vYw%2Fimage.png?alt=media\&token=82134822-0415-49c1-be3e-871804ea7738)

![Saturation = 0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i6irzR_bJ4dOyk1qc%2Fimage.png?alt=media\&token=7bae0f10-b9c1-4925-840f-0275f1783a25)

### Gamma <a href="#gamma" id="gamma"></a>

Adjusts the gamma of the image, with values between `-100` and `100`.

The default value is `0` (no gamma adjustment).

![Gamma = -20](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i6tzxDxKqmzOCjC9_%2Fimage.png?alt=media\&token=b1b13d28-66b8-4b27-950e-8f3d656baef9)

![Gamma = 0](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i70pD9TqICDA-PgyA%2Fimage.png?alt=media\&token=a53d9ca9-6504-4b0b-baf8-d848092b61b5)

![Gamma = 50](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i74OODfwdG6Ce718R%2Fimage.png?alt=media\&token=18e17736-fe68-4b0a-9411-d13817e6b422)

### Quality <a href="#quality" id="quality"></a>

Sets the quality of the output image, with values between `0` and `100`.

This setting only affects JPEG images. Higher quality values result in images with a larger file size.

The default quality is `85`.

![Quality = 15](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i79kaNlzUYvz_YsG6%2Fimage.png?alt=media\&token=37924504-0a4d-465c-b5bf-90ba757a2b62)

![Quality = 50](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i7E2M6RwMHwgGX0E7%2Fimage.png?alt=media\&token=e87566fc-dc23-40b2-8684-e10c9cad6522)

![Quality = 85](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i7Hnceu-pUvvEbtj_%2Fimage.png?alt=media\&token=74481eda-5ae4-4ce2-a8d8-ebe86a7590d4)

### Format <a href="#format" id="format"></a>

Normally images are processed and presented in the same format as the input image. This parameter allows you to force the output image to a particular format.

You can force images to be output as *jpeg*, *png* or *webp*, using `format=jpeg`, `format=png` or `format=webp`.

If the original image has an alpha channel (e.g. transparent PNGs), a white background will be applied if the output format does not support transparency.

![format = PNG](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i7USA6RWQzO1jYGCb%2Fimage.png?alt=media\&token=08f32260-a9df-481e-83a7-1f8a6ece7e12)

![format=jpeg](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i7Y4EprO0ruP9kc-R%2Fimage.png?alt=media\&token=413f2048-7146-4fa7-8e33-f41972fdd8ba)

![Format = JPEG & Quality = 5](https://1152996346-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4OVwLnfB0xsqOJcSjm%2F-M4i2RcW8zploRsSEGmH%2F-M4i7bAT3EMI2lQRKP1Z%2Fimage.png?alt=media\&token=4bb1efb6-3b83-4412-97ca-d1cf04fc0581)

### Upscale <a href="#upscale" id="upscale"></a>

Defines whether the image can be resized past its original size. Set to `false` to prevent upscaling.

The default upscale value is `true`.

### Debug <a href="#debug" id="debug"></a>

When LibPixel encounters an error processing an image it may still return a valid image. For example, when using a query string parameter value that's invalid, LibPixel may choose to use a default value or clamp it to the accepted range.

To see an error message instead (as an image), you can set the `debug=true` query string parameter.

<div align="center"><img src="https://libpixel.libpx.com/test/hills.jpg?width=240&#x26;height=240&#x26;mode=crop&#x26;blur=-10&#x26;debug=true&#x26;dpr=1" alt="blur=-10&#x26;debug=true"></div>

### Pass through parameters <a href="#pass-through-parameters" id="pass-through-parameters"></a>

If you wish to pass query string parameters to your server or image source, just prefix them with an underscore. LibPixel will strip the underscore and pass the parameter along when the image is fetched. For example:

`https://yourdomain.libpx.com/my-images/avatar.jpg?width=200&_user=247`

would cause LibPixel to fetch the image from the following URL:

`https://my.image.source.com/images/avatar.jpg?user=247`

(The image source in this case is `https://my.image.source.com/images/`)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.libpixel.com/api-documentation/image-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
