Rounding Image Corners
Many website designs require images with rounded corners for a professional look. Additionally, some websites may need images with a complete circular or oval crop. For example, Twitter uses rounded corners for its users' profile pictures.
To achieve rounded corners programmatically, you can combine the original rectangular images with modern CSS properties or image masking overlays. However, it may be more convenient to deliver images with rounded corners already applied. This is especially useful when embedding images in an email, a PDF, or a mobile application, as most mail clients cannot add CSS-based rounded corners. Delivering images with rounded corners from the start is also beneficial when simplifying CSS and markup or when supporting older browsers.
To transform an image into a rounded version, you can use the radius parameter (r in URLs). This allows you to manually specify the degree of rounding for different corners or automatically round the image to an exact ellipse or circle shape.
To ensure you deliver images with a transparent background, please convert the image to PNG format. If the chosen format does not support transparency, the image will be delivered with a default white background. However, you can easily adjust the background using the background transformation parameter. Kindly note that the PNG format may result in larger file sizes compared to the JPEG format.
To manually control the rounding, use the r (radius) parameter with between 1 and 4 values defining the rounding amount (in pixels, separated by colons), following the same concept as the border-radius CSS property. When specifying multiple values, keep a corner untouched by specifying '0'.
- One value: All four corners are rounded equally according to the specified value, creating a symmetrical effect.
- Two values: The top-left and bottom-right corners are rounded to the first value specified, while the top-right and bottom-left corners are rounded to the second value specified. This creates a symmetrical effect between opposites.
- Three values: The top-left corner is rounded to the first value specified, while the top-right and bottom-left corners are rounded to the second value specified. The bottom-right corner is rounded to the third value specified. This creates a symmetrical effect between one set of corners.
- Four values: Each corner is rounded separately, in clockwise order starting with the top-left corner. This allows for precise control over the rounding of each individual corner.
For Example:
You may utilize automatic cropping of images to the shape of an ellipse (for rectangle image sizes) or a circle (for square image sizes) instead of specifying specific rounding values. To achieve this, pass "max" as the value of the radius parameter, rather than using numeric values.
For instance, the following example demonstrates the transformation of an uploaded JPEG image with a rectangular size with maximum radius cropping. This generates an ellipse shape with a transparent background.
You may resize or crop any rectangular image to a square shape using ar (aspect ratio) parameter or height and width parameters. Applying the radius cropping after it will generate a perfect circular mask with a transparent background.
For Example, applying r_max to the above photograph by fixing the aspect ratio 1.0 along with c_crop parameter:
Other API References: g (gravity) | c (crop) | h (height) | w (width) | ar (aspect ratio) | x, y (x & y coordinates)
You can also apply circular pictures of your users on other images by using the layer_apply and r (round) parameters. This parameter instructs Front.Space API to apply rounding and other transformations to the overlay image, while keeping the base image as is.
For Example:
Other API References: g (gravity) | c (crop) | h (height) | w (width) | ar (aspect ratio) | x, y (x & y coordinates) | l (layer) | fl (flag)