Documentation

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

imgix avatar

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.

w=200&h=200&fit=facearea
Woman hat

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.

w=200&h=200&fit=facearea&faceindex=1
Woman hat

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.

w=200&h=200&fit=facearea&facepad=2
Woman hat

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.

w=200&h=200&fit=facearea&faceindex=1&facepad=2&mask=ellipse
Woman hat

That’s looking pretty good. We can now programmatically apply these imgix URL 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.

Original Image
Kids

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

faceindex=1
Kids
faceindex=2
Kids
faceindex=3
Kids

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, trimcolor, and trimtol 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.

Original Image
Trim ex3

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.

trim=auto
Trim ex3

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).

trim=color&trimcolor=e9e9e9
Trim ex3

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 trimtol to widen the range of greys that we’re willing to cut.

trim=color&trimcolor=e9e9e9&trimtol=10
Trim ex3

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.

Original Image
Ugc rv

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.

auto=enhance
Ugc rv

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.

auto=enhance&exp=2
Ugc rv

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.

auto=enhance&exp=2&usm=20
Ugc rv

Masking Complex Images

In addition to the ellipse masking that we used in the avatar example above, imgix can also mask images based on another image (see the Dynamic Masking tutorial for more specifics). If you have images with a subject against a solid background with high contrast, you may be able to use the image as its own mask. This works best for standard product photos against a white or black background, when you want to knock out the background to make it transparent.

Note: This technique is experimental and may not work consistently across your entire image catalog. We’re including it to spark ideas and demonstrate the flexibility and power of the Image URL API, so if you try it out, let us know how it goes!

The basic idea is to start with the original image, posterize it through a variety of parameters to create the mask, and then feed the posterized version in as the value of the mask parameter to knock out the background.

Here’s our original image of a boot, a JPG image with a patterned background. But suppose that there’s a new design for product listings that requires a light grey background instead—the existing background will detract from the design, so we want to remove it.

Original Image
Ugc boot clouds

Normally, this would require bringing the image back into an editing program and doing the adjustments there, then re-exporting for the website. Across hundreds or thousands of images, this becomes problematic for time and cost. However, because of the excellent contrast between the product and the background, we can use imgix’s masking to do this.

Creating the Mask

In making the mask, what we’re trying to do is reduce the image to pure black and white values so that only the part of the image we want to keep will show through. This requires several parameters—here’s what it looks like and what each one is doing.

sat=-100&exp=3&high=-100&shad=-100&con=100000&invert=1
Ugc boot clouds
  • sat=-100: Removes color to make image greyscale
  • exp=3, high=-100, shad=-100: Decreases the difference in color values of the boot, so that it’s a solid block of black
  • con=100000: Increases the contrast between light and dark areas
  • invert=1: Reverses black & white values so the background is the mask

Applying the Mask

Now that we have the mask, all we need to do is take its URL, Base64-encode it, and pass it in as the value of mask. We’ll also need to change the base image format to PNG with fm=png to preserve the transparency we just created.

Old background removed
Product listing with new background
Ugc boot clouds
Final URL

https://assets.imgix.net/tutorials/ugc-boot-clouds.jpg?w=300&fm=png&mask64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L3R1dG9yaWFscy91Z2MtYm9vdC1jbG91ZHMuanBnP3NhdD0tMTAwJmV4cD0zJmhpZ2g9LTEwMCZzaGFkPS0xMDAmY29uPTEwMDAwMCZpbnZlcnQ9MSZ3PTMwMA


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.

Related Posts