Width

      Last updated May 18, 2020

    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
    Back to Top