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.

Note that these options are only applicable when Applying Responsive Images Manually. When Applying Responsive Images Automatically, the options are set automatically depending on the target container parameters.

In this article:

Usage

To make an image responsive you need to construct a request URL using this format:

https://bs1.cdn.telerik.com/image/v1/{your-app-id}/resize={ResizeParameters}/{URLToImage}

where:

  • {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:

https://bs1.cdn.telerik.com/image/v1/cA2Az6w7JWnKPFpd/resize=w:200,h:200/https://bs3.cdn.telerik.com/v1/cA2Az6w7JWnKPFpd/608fe9f0-fb95-11e3-87ab-6bcb15412521

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:

    resize=w:200,h:200

    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:

    resize=w:300,h:300,fill:contain

    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:

    resize=w:50pct

    View result

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

    resize=w:5000,fill:contain,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):

    resize=w:300,pd:2

    View result

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

    resize=w:160,h:160,fill:cover

    View result

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