Optimize images for faster loading
Large image file sizes are one of the main bottlenecks that slow down the website's rendering speed. One way to tackle this issue is reducing the size of the image files by compressing them and resizing them to a smaller resolution.
Digital Assistant has built-in image optimization capabilities that you can apply to images on your Cards.
How it works
Digital Assistant provides an intermediate service that can download an image from a specified Url and return an automatically optimized version of it. The service can be accessed in the following format:
http://<YOUR INSTANCE ADDRESS>/rimage/<URL OF THE IMAGE>?<ADDITIONAL PARAMETERS>
To provide an example we're going to use an unoptimized image which resides within a local Digital Assistant installation on
Now, let's resize and compress this image, by sending the following request:
And we'll get the following result back:
As you can see the result is a much smaller picture (both in resolution and in file size).
The following parameters can be specified to optimize the image:
- Specify the format for the image to be saved in.
jpeg, gif, png
- Specify the width of the optimized image.
- Specify the height of the optimized image.
- Specify the mode of image resize.
- Available values
- Resizes the image to the given dimensions. If the set dimensions do not match the aspect ratio of the original image then the output is padded to match the new aspect ratio. Passing a single dimension will automatically preserve the aspect ratio of the original image.
- When upscaling an image the image pixels themselves are not resized, rather the image is padded to fit the given dimensions. When downscaling the image is resized using the rules defined by
- Resizes the image to the given dimensions. If the set dimensions do not match the aspect ratio of the original image then the output is cropped to match the new aspect ratio.
- Resizes the image until the shortest side reaches the set given dimension. This will maintain the aspect ratio of the original image. Upscaling is disabled in this mode and the original image will be returned if attempted.
- Resizes the image to the given dimensions. If the set dimensions do not match the aspect ratio of the original image then the output is resized to the maximum possible value in each direction while maintaining the original aspect ratio.
- Resizes the image to the given dimensions. If the set dimensions do not match the aspect ratio of the original image then the output is stretched to match the new aspect ratio.
- To learn more about available resize modes please have a look here.
- Specify the quality of the image after the compression from 1-100.
If you want to keep the aspect ratio of the original image use only either
heightproperties when resizing the image.
Image taken from wikipedia.