Resizing and Cropping

Whether your web or mobile application provides carefully chosen photos created by your company, images provided by your end users (UGC), or both, you probably need to edit the originals to meet the visual style of your website or mobile application.

These objectives can be accomplished programmatically and instantly with Front Space's dynamic URL transforms, eliminating the need for graphic designers and expensive editing software.

To resize and crop images using Front Space, you can use the following URL patterns:

Resizing Images

To resize an image, you can specify the desired width and height in pixels. Here's an example:

In the above example, w_500 specifies the width of the image as 500 pixels, and h_300 specifies the height as 300 pixels.

You can also specify the width and height as percentages of the original image size. For example:

In this case, w_0.2 specifies the width as 20% of the original image width, and h_0.2 specifies the height as 20% of the original image height.

See: Resizing Image using Front.Space - API Reference

Other API References: g (gravity) | c (fill) | c (resize) | h (height) | w (width)

Cropping Images

To crop an image, you can specify the desired width and height of the cropped area, along with the coordinates of the top-left corner of the area. Here's an example:

In the above example, w_500 specifies the width of the cropped area as 500 pixels, h_300 specifies the height as 300 pixels, x_100 specifies the x-coordinate of the top-left corner as 100 pixels, and y_200 specifies the y-coordinate of the top-left corner as 200 pixels.

You can also specify the cropping mode to control how the image is cropped. For example:

In this case, c_fill specifies that the image should be cropped to fill the specified width and height, while maintaining its aspect ratio.

See: Cropping Image using Front.Space - API Reference

Other API References: g (gravity) | c (fill) | c (resize) | h (height) | w (width)

Gravity Parameter

The gravity parameter allows you to control the position of the image within the specified width and height. By default, the image is aligned to the center. However, you can use the gravity parameter to align the image to a different position.

To use the gravity parameter, you can specify one of the following values:

• north: Aligns the image to the top.
• south: Aligns the image to the bottom.
• east: Aligns the image to the right.
• west: Aligns the image to the left.
• center: Aligns the image to the center (default).

Here's an example URL that uses the gravity parameter to align the image to the top:

In this example, g_north specifies that the image should be aligned to the top.

See API References: g (gravity) | c (crop) | c (resize) | h (height) | w (width)

Blur Parameter

The blur parameter allows you to apply a blur effect to the image. You can specify the strength of the blur by setting the value of the blur parameter.

To use the blur parameter, you can specify a value between 0 and 2000. A higher value will result in a stronger blur effect.

Here's an example URL that applies a blur effect to the image:

In this example, e_blur:500 specifies that the image should be blurred with a strength of 500.

See: Blurring Image using Front.Space - API Reference

See API References: g (gravity) | e (blurred) | c (resize) | h (height) | w (width)

Format Parameter

The format parameter allows you to specify the desired format of the transformed image. Front Space supports a wide range of image formats, including JPEG, PNG, GIF, and WebP.

To use the format parameter, you can specify one of the following values:

• jpg: Specifies the JPEG format.
• png: Specifies the PNG format.
• gif: Specifies the GIF format.
• webp: Specifies the WebP format.

Here's an example URL that specifies the format of the transformed image:

In this example, f_webp specifies that the transformed image should be in the WebP format.

See: Supported Image Formats on Front.Space

See API References: f (format) | h (height) | w (width)

Crop Modes

Front Space provides different crop modes that allow you to control how the image is cropped when using the c_crop parameter. The following table lists the available crop modes:

To use a specific crop mode, you can set the value of the c parameter to the desired mode. For example:

In this example, c_crop,g_east specifies that the image should be cropped using the crop mode and aligned to the right.

See: Cropping Image using Front.Space - API Reference

Other API References: g (gravity) | c (crop) | c (fill) | h (height) | w (width) | c (pad) | c (limit) | c (scale)