Image optimization

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.

Now Assistant has built-in image optimization capabilities that you can apply to images on your Cards.

How it works

Now 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 Now Assistant installation on http://localhost/images/galaxy.jpeg:

Example unoptimized image

Now, let's resize and compress this image, by sending the following request:

http://localhost/rimage/localhost/images/galaxy.jpeg?format=jpeg&width=600&mode=crop&quality=80

And we'll get the following result back:

Optimised galaxy image

As you can see the result is a much smaller picture (both in resolution and in file size).

Additional parameters

The following parameters can be specified to optimize the image:

format
Specify the format for the image to be saved in.
Available: jpeg, gif, png
width
Specify the width of the optimized image.
height
Specify the height of the optimized image.
mode
Specify the mode of image resize.
Available values
pad
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.
BoxPad
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 pad.
crop
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.
min
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.
max
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.
stretch
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.
quality
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 width or height properties when resizing the image.

Image taken from wikipedia.

Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker