Image Optimization API
Learn how each query parameter affects your image.
|Brightness||Adjusts the image brightness.||Numbers between |
|Contrast||Adjusts the image contrast.||Numbers between |
|Gamma||Adjusts the image gamma.||Numbers between |
|Sharpen||Sharpen the image.||Numbers between |
|Background||Sets the background colour of the image.||3 digit RGB|
|4 digit ARGB (alpha)|
|6 digit RGB|
|8 digit ARGB (alpha)|
|Any of the 140 colour names supported by all modern browsers.|
|Border||Add a border to the image.||Must use the format |
Sets the border width in pixels, or using relative dimensions.
Relative dimensions allow you to specify a width or height value as a percentage of the main image.
To use a relative dimension, simply provide a percentage as a number (between
100), followed by a
w (width) or
h (height). For example,
5w represents 5% of the width of the main image.
Sets the border colour - see the background parameter for accepted values.
Sets how the border will be displayed. Available options:
overlay: Place border on top of image (default).
shrink: Shrink image within border (canvas does not change).
expand: Expands canvas to accommodate border.
Cropping is mostly done with the
fit parameter, but you can also do a lot more with it than just cropping. Read more about the
fit parameter here.
|Fitted Crop||Crops the image based on what |
|Position||You can also set where the image is cropped by adding a crop position.||One of: |
|Focal Point||Be specific about the exact crop position using a focal point.||Use two offset percentages: |
|Zoom||Zoom into your focal point by providing a third value: a float between |
Each full step is the equivalent of a 100% zoom. (eg.
|The suggested range is |
|Crop||Crops the image to specific dimensions prior to any other resize operations.||Required format: |
The device pixel ratio is used to easily convert between CSS pixels and device pixels.
This makes it possible to display images at the correct pixel density on a variety of devices such as Apple devices with Retina Displays and Android devices.
You must specify either a width, a height, or both for this parameter to work.
|DPR||Display images at the correct pixel density.||Numbers between |
|Blur||Adds a blur effect to the image.||Numbers between |
|Pixelate||Applies a pixelation effect to the image.||Numbers between |
|Filter||Applies a filter effect to the image.|
|Quality||Defines the quality of the image.||Numbers between |
Only relevant if the format is set to
|Format||Encodes the image to a specific format.||Accepts |
fit parameter sets how the image is fitted to its target dimensions.
The accepted values for
fit are as follows:
|This is the default. |
Resizes the image to fit within the width and height boundaries without cropping, distorting or altering the aspect ratio.
|Resizes the image to fit within the width and height boundaries without cropping, distorting or altering the aspect ratio, and will also not increase the size of the image if it is smaller than the output size.|
|Resizes the image to fit within the width and height boundaries without cropping or distorting the image, and the remaining space is filled with the background color. |
The resulting image will match the constraining dimensions.
|Resizes the image to fit within the width and height boundaries without cropping but upscaling the image if it's smaller. |
The finished image will have remaining space on either width or height (except if the aspect ratio of the new image is the same as the old image).
The remaining space will be filled with the background color and the resulting image will match the constraining dimensions.
|Stretches the image to fit the constraining dimensions exactly. |
The resulting image will fill the dimensions, and will not maintain the aspect ratio of the input image.
|Resizes the image to fill the width and height boundaries and crops any excess image data. |
The resulting image will match the width and height constraints without distorting the image.
See the crop section for more information.
Flip & Rotate
|Flip||Flips the image.||Accepts |
|Orientation||Rotates the image.||Accepts |
|Width||Sets the width of the image in pixels.||Any number.|
|Height||Sets the height of the image in pixels.||Any number.|