Responsive Images Resizing Options

Responsive Images Resizing Options

Various resizing options are available when manipulating images using Telerik Platform Responsive Images. They include the ability to specify new height and width, pixel density, aspect ratio, and fill mode, among others.

In this article:


To make an image responsive you need to construct a request URL using this format:{your-app-id}/resize={ResizeParameters}/{URLToImage}


  • {your-app-id} is your Telerik Platform App ID.
  • {ResizeParameters} is a correctly formatted set of resize parameters described in Table of Resize Parameters.
  • {URLToImage} is the URL of the image that you want to resize. This can be a URL of a file stored in Telerik Platform or an external resource.

For example, to resize an image to dimensions 200 by 200 px, construct the URL like this:,h:200/

Table of Resize Parameters

Name Parameter Value Description
Width w:{value}[pct] Pixels (no unit) or Percentage (use pct unit) Proportionally resize the image to the given width. Can be used in conjunction with h:{value} for disproportional resizing. Value range: in px—10 to 10000; in %—0pct to 100pct
Height h:{value}[pct] Pixels (no unit) or Percentage (use pct unit) Proportionally resize the image to the given height. Can be used in conjunction with w:{value} for disproportional resizing. Value range: in px—10 to 10000; in %—0pct to 100pct
Fill fill:{value} contain or cover Describes how content is resized to fill its allocated space. If set to "contain": Scales the image to the largest size such that both its width and height fit inside the content area, leaving translucent stripes if the aspect ratios do not match. If set to "cover": Scales the image to cover the specified area in its entirety, cropping the image if the aspect ratios do not match. Always include fill if you want to ensure that the image's aspect ratio is kept.
Upscale upscale:{value} True or False (Default: false) Allows images to be sized larger than the original in case the w: or h: parameters surpass the original image dimensions. If set to false, higher than original resize dimensions are ignored.
Pixel Density pd:{value} Floating point value Allows setting the pixel density of the resulting image. Value range: 0.0 to 10.0
PNG Compression optimize:{true|false} Boolean Enables or disables the automatic lossy compression of PNG images. This setting offers mild compression that should not be noticeable to the naked eye. Default is true (enabled).
Metadata Retention keepMetadata:{true|false} Boolean Whether to keep the image metadata (such as EXIF) intact when processing the image. If set to false, all metadata is stripped to save space. Default is false.

Examples of Parameter Usage

This section contains examples for various resize parameter configurations. Each example can be clicked to view the actual result of the image operation in a web browser.

All examples use a single original image of 3888 x 2592 px resolution.

  • Specify a set size of 200px x 200px:


    View result

  • Ensure that the entire image fits in a 300px x 300px target container, preserving the aspect ratio. You need to include fill, otherwise the image is resized disproportionally:


    View result

    The following picture illustrates the effects of contain and cover:

    Differences between fill modes

  • Resize to 50% of the original image. You can also use h:50pct or w:50pct,h:50pct to the same result:


    View result

  • Allow upscaling—if you want to allow smaller images to be upscaled, you must include upscale:true:


    View result

  • Address high-pixel-density devices—this doubles the pixels per area in the returned image. In this example the resulting image has a width of 600 px (w:300 multiplied by pd:2):


    View result

  • Create a rectangular thumbnail—bigger images are resized and cropped to fill the entire area:


    View result

Start a free trial Request a demo
Contact us: +1-888-365-2779
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.