LOG IN SIGN UP
Documentation

Width

Features

Description

The width parameter enables dynamic width resizing based on pixels and percent values. The {value} can be either a positive integer or a float between 0.0 and 0.99. If the width parameter is an integer greater than or equal to 1, the value is interpreted as a pixel width. If the width parameter is a float between 0.0 and 0.99, the value is interpreted as a percentage width. The width parameter will automatically calculate the height of the image according to the aspect ratio of the input image. If a height parameter is present this value will be used instead. If both width and height are omitted, the input image dimensions are used.

API Pattern

width={value}

Parameter

Parameter Description
width Width of the output image.

Parameter Values

Value Units Description
Integer Pixels A whole number between 1 and 8192.
Float Percentage Decimal number between 0.0 and 0.99.

Notes

  1. The maximum output dimensions are 8,192x8,192 pixels.
  2. If the input image is smaller than the desired output dimensions, the image will upscale in size. Upscaling can be turned off using the disable=upscale parameter.
  3. Because we use a positive float between 0.0 and 0.99 to return a percentage-based scaled image, in order to return an image that is 100% or more, a p parameter can be appended to the value. For example, width=250p would return an image that is 250% the width of the original. We use p as a simple way to represent percent.
  4. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

Examples

Description HTML Demo
Pixel Resize - Resize the width to 200px. <img src="image.jpg?width=200"/> Example
Percentage Resize - Resize the width to 10% of the input image. <img src="image.jpg?width=0.10"/> Example
Percentage Resize - Resize the width to 150% of the input image. <img src="image.jpg?width=150p"/> Example
Advanced Examples (Combining Additional Parameters)
Description HTML Additional Param Demo
Disproportionate Resize - Disproportionally resize to a width of 200px and a height that is 50% of the original. <img src="image.jpg?width=200&height=0.50"/> height Example
Resize To Bounds - Resize the image to fit within the bounds of 150px in width by 150px in height. <img src="image.jpg?width=150&height=150&fit=bounds"/> fit Example
Resize & Device Pixel Ratio - Resize the width to 200px for screens with a device pixel ratio of 2. <img src="image.jpg?width=200&dpr=2"/> dpr Example
Resize & Don't Upscale - Resize the width to 2560px (or to as large as possible) without upscaling the output image. <img src="image.jpg?width=2560&disable=upscale"/> disable Example