About Responsive Image library

1

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/responsive-static-image-simple.html

The following is a simple example where the responsive image is within a container that takes 50% of the web page width. Every time the browser window is resized the container width changes. When the image width reaches one of the configured breakpoints-which are set at 200, 400, 600 and 800 pixels for illustrative purposes-a new rendition is downloaded and displayed. The goal is to avoid loading unnecessary large images and save network bandwidth.

Click the URL to open the web page, resize the browser window, and monitor network traffic.

2

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/responsive-static-image-bootstrap.html

The following Bootstrap example illustrates the same use case in a web page. According to Bootstrap CSS, the layout cell to which the responsive image is added can take one of the following widths: 360, 720 and 940 pixels. These are the exact values that are passed as breakpoints to the Responsive Image Library. As such, Scene7 ensures that the client's network bandwidth is used effectively. And, it also ensures that the image is displayed in the exact size needed-given the current web page layout-without any visual artifacts from scaling the client-side browser.

Click the URL to open the web page, resize the browser window to hit different layout breakpoints, and monitor network traffic.

More advanced use cases include associating different Image Presets, or Image Serving commands, or both, with different breakpoint values.

3

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/image-presets.html

In this next example, Image Presets of different image quality and format for different breakpoint sizes are used. For a small breakpoint, a low-quality preset is applied which forces Image Serving to return the GIF image compressed to six colors only. A medium breakpoint is using an Image Preset configured for JPEG with high compression. The largest breakpoint is associated with a high-quality Image Preset using lossless PNG. Such method ensures that high-quality images are delivered to such devices, based on the assumption that devices with larger screens have greater bandwidth and processing power.

Click the URL to open the web page, resize the web browser window from larger to smaller and notice how the image quality degrades.

4

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/crops.html

In addition to Image Presets, it is possible to associate specific Image Serving commands with breakpoints. The following example shows how it is possible to gradually crop the banner image to the region of interest as the onscreen image size becomes smaller. Here, the largest breakpoint does not have any Image Serving commands at all, so the banner image is fully visible. At medium breakpoint applies moderate cropping, making only the runner with text "Running" visible. At small breakpoint, more cropping is applied so that only the product is shown.

Click the URL to open the web page and resize your browser window. Notice how the image crops gradually as you go from a larger to a smaller size.

5

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/template.html

You can also use Image Serving commands with Image Serving Templates to control certain template parameters based on the image size. In this next example, an Image Serving Template is used where the font size of the text overlay is parameterized using $fontsize parameter. Responsive image is configured to use a larger font size for smaller image sizes to ensure that text always remains readable: