Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Applying Responsive Images Manually

Applying Responsive Images Manually

In addition to the more automated approach to using Responsive Images provided by the Backend Services JavaScript SDK, you can manually set the resizing options that you prefer using JavaScript.

The manual approach is based on requesting an optimized image from Responsive Images by directly manipulating an URL address. The various resize parameters are set in the URL directly. You can use the URL in any HTML tag that uses images such as <img> or tags with the style="background-image" attribute.

This article contains these topics:

Setting Up an IMG Tag

To set up an tag to use an image optimized by Responsive Images, you only need to replace the original image URL with an URL constructed according to the instructions in Responsive Images Resizing Options.

For example:

<img src="https://bs1.cdn.telerik.com/image/v1/your-app-id/resize=w:350/http://www.example.com/images/image.jpg"/>

Setting Up a CSS Background Image

To set up a CSS background image to use an image optimized by Responsive Images, you only need to replace the original image URL with an URL constructed according to the instructions in Responsive Images Resizing Options.

For example:

<div style="background-image: url(https://bs1.cdn.telerik.com/image/v1/your-app-id/resize=w:350/http://www.example.com/images/image.jpg)"/>

See Also

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