Dynamically Processing User-Generated Images for Trust, Personalization and Efficiency

If you manage an online marketplace that relies on user engagements and social sharing, user-generated content and images (UGC/UGIs) are some of the most valuable assets. Review sites like Yelp let users rave about or bemoan the quality of restaurants through photos. Travel sites help proprietors attract visitors with beautiful shots and videos. Finally, photo-sharing sites like Unsplash help photographers showcase their unique sensibilities and gain exposure.

However, UGIs are tricky to work with, and the penalty of getting it wrong can be steep. In this article, we’ll show you how to process UGIs programmatically, so you can build trust, improve user experience, and simplify your workflow.

The Benefits of User-Generated Content

User-generated content, especially images and videos, is great for building an ever-growing user base. If you build a healthy ecosystem on your site or app, you can harness the power of UGIs in these three ways:

• Trust: Friends, neighbors, peers, and colleagues trust each other much more than they trust marketing messages. A recent study by Stackla found that 60% of consumers based their buying decision on advice from family and friends. When the connection is authentic, there is more trust.

  
  

• Personalization: People's tastes and preferences are unique. In a world of increased individuality, users want personalization. User-generated content is a great way to reach niche audiences and cater to their needs.

  
  

• Cost-effectiveness: What's more, getting images from users is often the more practical and cost-effective way to generate content, especially for online marketplaces.

  
  

What to Focus on When Processing User-Generated Images

If you are working with UGC, chances are you're dealing with thousands, if not millions, of UGIs daily. The images may be from inexperienced influencers, seasoned photographers, or anyone in between. As a result, these images likely have a huge range of formats, sizes, and qualities.

On the other end, your site visitors who consume the content still expect the best experience, which includes the following:

• Fast image loading and page speed
• Responsive design and device adaptability
• Standardized format and composition
• Brand safety and content moderation

Bridging the gap between user expectations and the challenges of UGI processing can be daunting. And finding a simple solution that solves all these needs can seem nearly impossible. However, there are cost-effective, reliable, and scalable solutions, and in the rest of this article, we’ll show you exactly what they are and how easily you can deploy them.

1. Optimizing for Fast Loading and Page Speed

Images and videos, particularly those generated by users, are often the largest files on a web page, leading to slow page speed. If SEO is important to your business, you should try to optimize and compress images, which can improve your page speed, Core Web Vitals, and in turn, your search results. With Imgix, you can combine three common techniques to reduce the image file size and speed up page speed:

• Serve images in next-gen formats such as AVIF or WebP
• Properly resize image dimensions
• Let Imgix apply best-effort compression

In the examples below, the original image has a file size of 3.3MB. The optimized image, despite looking identical, has a file size of only 215kB, which is 93% smaller than the original. This would improve loading speed significantly. It’s achieved by using three simple transformations as an URL query string - fm=webp&auto=compress&w=2000.

Original Image - 3.3MB

Optimized image - 215kB. Click on the link and see the size reduction.

2. Responsive Design

With the proliferation of devices and browsers, you simply can’t rely on one image version to adapt to different environments and look good in each. Conversely, manually generating derivative files for different dimensions is labor-intensive and hardly scalable.

Fortunately, the <srcset> attribute alleviates that need by directing the browser to identify the best image size based on available options. Additionally, you can use Imgix and <picture> element for Art Direction.

• Srcset for resolution switching
• <picture> for art direction

3. Standardize Visual Quality and Composition

Most user-generated images aren’t created professionally. They are often too bright, too dark, or simply too inconsistent from one another. To improve the visual quality and cohesion, you should consider a standard set of image enhancements. And if you’re processing thousands or more UGIs a day, automation can help you save a massive amount of time.

• auto=true — makes the image more vibrant by adjusting the distribution of highlights, midtones, and shadows across RGB channels
• auto=redeye — provides red-eye removal

Focusing and framing the faces are also important. The facial expression of a news subject, if zoomed in and cropped appropriately, can often tell a more nuanced story than any words. And if you host product reviews from users, user avatars would add authenticity and credibility. Several Imgix API parameters make it easy to detect, frame, and crop to faces:

• faceindex — selects a face on which to center an image. You can isolate a particular face or include multiple faces. In the example below, we selected the child’s face using faceindex=2 and a few other parameters.

• facepad — defines the amount of padding around the faces. In the example below, along with a few other parameters, we zoom into the model’s face using facepad=1.

• mask — sets a mask over an image. In the example below, along with a few other parameters, we put a circular mask around the model’s face using mask=ellipse.

Just to note, Imgix does not store face information or identify any individual in the pictures. All detection occurs on the fly and complies with EU Data Protection regulations.

4. Content Monitoring and Moderation

With UGIs, content safety is another high-stake consideration. The Imgix Asset Manager can help you automatically detect potentially violent, adult, or otherwise questionable content. Content alerts make organizing user-generated images faster and easier, and you can automate content moderation more effectively.

Get Started With User-Generated Image Processing

As the volume, variety, and complexity of user-generated content increase, it can exacerbate the strain on you and your team. We built Imgix so you can deliver the best visual experiences to your visitors, improves page performance, and eliminate redundant work for your developers and designers.

What's shown in this article simply scratches the surface of what Imgix offers. Check out the following resources to see how Imgix can help you with your visual media needs.

• Learn about the common UGI transformations
• Create a free imgix account

Read these case studies to see how our customers have worked with UGIs.

• Eventbrite

• Pexels

• Real Estate Wire (REW)