Crop Circle Profile Pictures on Wix

Using CropGuide to crop circular profile pictures on Wix, use our image cropper to create rounded photos before upload.

First we need to install CropGuide for Wix. Then we can set circular cropping.

Try CropGuide live on our product page

Converting images to circular profile pictures

First we need to make sure the image is cropped to a square, then we can apply a circular mask, otherwise we would get elliptical profile pictures.

Let’s select your website in the CropGuide customer dashboard, and scroll towards the Configuration heading.

Cropping images to a square aspect ratio

  1. Scroll down towards the Crop aspect ratio heading. A screenshot of the CropGuide dashboard showing the crop aspect ratio input
  2. Enter 1 into the input field.

Let’s now apply the circular mask.

Applying the circle mask to the square profile picture

Now can then enable the circle crop mask in the CropGuide customer dashboard, this will ensure images uploaded by your users will always be circular.

  1. Scroll down towards the Mask heading. A screenshot of the CropGuide dashboard showing a dropdown to select an image mask
  2. Select Circle mask.
  3. Click Save.

That’s it. If we navigate to the form on the website and refresh the page we can test if our new settings have loaded.

We can additionally show a circular image overlay to help user preview the end result.

Sticking with square profile pictures

We can also leave the circular mask the “None” setting and only show a circle guide to receive square images.

If you’re using these profile pictures on the web we can set border-radius to turn square images into circles.

<img src="my-image.jpeg" style="border-radius:100vmax" alt=""/>

Adding a circular image guide

To help the user make the perfect image crop we can enable a circular crop guide.

This will show a circle inside the image cropper so the user can see which parts of the image will be visible.

A screenshot of the CropGuide dashboard showing a dropdown to select an image guide

Apart from applying a circular image mask we can also apply other optimisations, like for example compressing images.

Test your image upload field

When using the image upload field on your Wix site, CropGuide will now apply a circular mask to the output image, resulting in circular profile pictures.

Try a CropGuide demo on the site, or reach out if you have any questions.

Related content