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 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.
Here’s our original image of three children. We’ll create individual photos for each child, by setting
faceindex for each one in turn.
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 (
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
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.
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
trimtol 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.
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.
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: Removes color to make image greyscale
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.
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.