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.
Furthermore, if you provide full-size images and rely on browser-side resizing through CSS or HTML width and height attributes, users will be compelled to download unnecessarily large files. Hence, it is essential to always serve images from the server at their final size.
By utilizing any of the Front.Space resizing transformations, the sizing (scaling/cropping) is executed on the server side, guaranteeing that the asset is consistently delivered to the browser at the requested size.
To resize and crop images using Front Space, you can use the following URL patterns:
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.
Other API References: g (gravity)ïŧŋ | c (fill)ïŧŋ | c (resize)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋïŧŋ
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.
Other API References: g (gravity)ïŧŋ | c (fill)ïŧŋ | c (resize)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋïŧŋ
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)ïŧŋïŧŋ
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 API References: g (gravity)ïŧŋ | e (blurred)ïŧŋ | c (resize)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋïŧŋ
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.
- avif: Specifies the AVIF format.
- jxl: Specifies the JPEG-XL 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 API References: f (format)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋïŧŋ
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:
Crop Mode | Description |
scale | Scales the image to fit within the specified width and height, maintaining its aspect ratio. This is the default mode. |
fit | Resizes the image to fit within the specified width and height, without necessarily maintaining its aspect ratio. |
fill | Resizes and crops the image to fill the specified width and height exactly, while maintaining its aspect ratio. |
limit | Resizes the image to fit within the specified width and height, but only if the original image is larger than the specified dimensions. |
pad | Resizes the image to fit within the specified width and height, adding padding if necessary to maintain the aspect ratio. |
crop | Crops the image to the specified width and height, without resizing. |
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.
Other API References: g (gravity)ïŧŋ | c (crop)ïŧŋ | c (fill)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋ | c (pad)ïŧŋ | c (limit)ïŧŋ | c (scale)ïŧŋïŧŋ
You can crop an image by detecting faces through Front.Space's AI detection by using g_face parameter. It works extremely well on animals (with detectable face) and humans alike.
For Example:
1) Detect the face of the cat and crop the face to 300 pixels:
2) Detecting the face of the lady and crop the image using g_face parameter:
Other API References: g (gravity)ïŧŋ | c (crop)ïŧŋ | c (fill)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋ | c (pad)ïŧŋ | c (limit)ïŧŋ | c (scale)ïŧŋïŧŋ
Using Front.Space AI Detection you can crop the images with a circular mask and detect faces to align them appropriately for Profile pictures or thumbnails. To perform the transformation you have to use r_max parameter to make a perfect circle defining either aspect ratio using ar as 1.0 or defining the same pixels for height and width.
For Example:
1) Compare Circular Crop the Cat image (sample8.jpg) using height, width, r_max parameters with and without face detection using g_face parameter:
2) Compare Circular Crop the Butterfly image (sample7.jpg) using aspect ratio ar_1.0 and r_max parameters:
Other API References: g (gravity)ïŧŋ | c (crop)ïŧŋ | h (height)ïŧŋ | w (width)ïŧŋ | ar (aspect ratio)ïŧŋ | x, y (x & y coordinates)ïŧŋïŧŋ
ïŧŋ
ïŧŋ
ïŧŋ