Resizing 101

Parameters to request your images at desired dimensions.

Using the following image for the demos:

https://cdn.ixmage.com/v2/grappler/images/demo/wall.jpg

Original dimensions are 1200x900

No size parameters

Not specifying any dimensions, neither width nor height, the service will default the image to 120px on the larger dimension.

Specifying just one dimension

Specifying just a width, of 400px, we get:

?width=400

The service has resized the image to be 400px in width, and kept the aspect-ratio assigning a height of 300px.

Knowing that the original image dimensions are 1200x900 pixels, it has an aspect-ratio of 4:3.

Specifying just a height of 150px, we can see how the service does the same thing to the width:

?height=150

Specifying just one of the dimensions, we are letting the service determine the other dimension to keep aspect-ratio.

Specifying both dimensions

?width=400&height=150

Specifying both width and height on the request will return an image that complies to our specifications. The default behavior is to keep the aspect-ratio, and center the image into the requested dimensions.

The above image is 400x150 pixels. Because of its dimensions, it ended up with some white padding to its left and right.

Let’s use a different background color for the padding, so it is more evident:

&bgc=teal

The teal padding is making the image comply to the requested 400x150 dimensions without losing its aspect-ratio.

So our image will scale to fit into the 400x150 area. It reaches its limit when the image is 200x150, covering the requested height and maxing its width to 200px. The remaining width pixels are padded using the requested background color. The default bgc is white.

We can also specify transparent padding when the image format supports it:

The image has CSS style to give it a black border to see its complete area.

Allowing image to grow beyond area

There is a parameter that will allow the image to grow to fill the desired area and leave some parts of the image “off-canvas”. The image will grow until the area is covered, and the aspect-ratio will not be lost. This means some regions of the image will not be visible.

&extend=1

In this example, the width of the image was set to cover the 400px of width requested, this results in a height of 300px. Because the requested height is 150px, and the image has been centered, this means that 75px on the top and 75px on the bottom are “off-canvas” and not in view.

Allowing image to distort

&cover=1

Adding the cover=1 parameter, we specify that aspect-ratio can be lost and the image can be stretched so that it covers the requested area, and all the image is in view.

Next steps

You can take a look at these parameters in more detail, and a lot more in the documentation.