Managing User-Generated Images

Creating a consistent user experience that incorporates user-generated content is always a challenge. The quality of what you receive varies greatly in both its quality and dimensions, which both have to be standardized to fit your defined containers. You may also have extra data that’s not desirable, like a border, that you’d like to remove to give all of the content a similar look and feel (for example, in a grid of product listings).

While addressing all of the aspects of standardizing user-generated content requires a human touch, some of them can be solved with imgix in an automated way. Let’s take a look at two common examples: user profile pictures (or avatars) and for-sale listings.

Note: We recommend against using imgix URLs as a way to test for upload success when collecting user-generated images. Requesting the image before it has finished uploading will cause the resulting 404 error to be cached for the length of time specified in your Error Cache TTL setting for that Source, and the image will not display until that time has passed.

Automating Avatars with Face Detection

We originally built out imgix’s face detection parameters in response to customer requests. They had large libraries of user-uploaded avatar photos, and a need to isolate and crop to the faces with more control. We started with the crop=faces parameter in conjunction with fit=crop, which crops to all faces within an image. However, this operation merely centered all faces within an image when cropping, and did not provide the ability to zoom in on any individual face.

To give our customers the greater control they required, we added new parameters with the ability to zoom and crop to faces, or to target individual faces with simple operations. Let’s see how this works with an example. We want to quickly transform a user-uploaded photo into a circular avatar.

First, we want to set the width and height and set the fit mode to fit=facearea. This combination of parameters zooms and crops the image to an area bounding both faces found in the original.

The resulting image is sized and cropped correctly—however, we’re picking up an extra face in the background, and we want to center on the primary face in the image. Adding faceindex=1 will now set the bounds to fit the first face, filling the width and height specified.

Now our image is only centered on the face we want, but it’s a little too close for comfort. Because faceindex zooms to the first face it finds, filling the specified dimensions, you may need to step back a bit to frame the photo properly. Using facepad will allow you to add some space around the face, effectively zooming out for better composition.

Much better. Finally, we want to give the avatars on our site a consistent size and appearance. We can do that quickly by setting the mask=ellipse parameter. Because the dimensions we’ve specified are equal, the mask will be a circle—it stretches to fill the size applied to the image.

That’s looking pretty good. We can now programmatically apply these rendering api parameters to all of the other avatar images on our site.

Isolating Faces Within a Group

As we showed above, the faceindex parameter allows you to select which face in the image to center your crop on. By incrementing the value, you can select a different face. The facepad parameter allows you to adjust the padding around the selected face in the image, helping to zero in on the perfect crop without giving the person an extreme close-up.

This example will show how to extract individual faces from the same image, without having to make multiple pre-cropped versions to serve.

Here’s our original image of three children. We’ll create individual photos for each child, by setting faceindex for each one in turn.

Both the faceindex and facepad parameters give you fine-grained control over photos with multiple subjects.

Point-of-Interest Cropping

For photos where you want to crop to the main focal point of the image but there is no face present, imgix also offers point-of-interest cropping (fit=crop&crop=entropy).

Trimming Unwanted Borders

Another common problem with user-generated images is that they sometimes arrive with borders or extra whitespace around the part of the image you actually care about. The trim, trim-color, and trim-tol parameters help you remove this extra data easily, so the relevant part of the image fills the container. Let’s see how each of these parameters interacts with the others to remove the grey border around this photo.

First, we need to add the trim parameter. In cases like the above image, where the border is well-defined and contrasts well against the image, trim=auto is probably all you need to clean it up. Notice that much like the face detection, this zooms in on the image that’s left after trimming and fills the container with it.

For an image like this with a solid border, you could also elect to trim based on the border color, with similar results. To do this, set trim=color and then define the color you want to remove (the grey in the original image is #e9e9e9).

This image has a bit of a gradient in the grey on the right side, though, which is why there’s still a thin strip of grey there. We can use trim-tol to widen the range of greys that we’re willing to cut.

The trim parameters are a great way of cleaning up user-generated content in your sites and apps by removing excess white area or bordering from existing images.

Enhancing User-Generated Images

Another issue with images that come from a wide variety of sources is that they are often under- or over-exposed, and also somewhat blurry. Though imgix can’t make a completely out-of-focus or washed-out image look good, for minor issues along these lines, a few parameters go a long way toward crisping up the quality. Let’s see how this might work on an RV listing.

Here’s the original image, which is slightly fuzzy and underexposed. Sometimes just reducing the image can make it look sharper, but it’s only 600 pixels wide to start with, so there isn’t a lot of extra data to play with here. However, we can start with auto=enhance, which evaluates the image and applies several adjustment parameters to improve overall quality.

For a large body of images, this might be all you want to do, in the service of automating your enhancements. If you want to go a bit farther, however, a small boost from the exp (Exposure) adjustment will get it just right.

You may want to experiment further with the other adjustment parameters to see what works best for your image catalog. This image is still slightly out of focus though, so let’s also sharpen the details with the usm parameter. You’ll be able to see the difference most easily in the swooshes on the side of the RV and the front wheel.

Conclusion

Automatically managing user-generated images definitely requires some thought. Even in complex cases, however, there is a lot you can automate with a few key parameters to get an attractive result and make your users or products shine. See the articles below for more detailed explanations of masking and other imgix features that can help.

Multi-line Text & Overlays with the Typesetting Endpoint Composing Multiple Ai Features