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. 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.
  3. 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