Cloudinary Blog

User-Generated Content, Part 2: Images and Their Transformations

User-Generated Content Part 2: Images and Their Transformations

User-generated content (UGC) can take many forms, the two main ones being images and videos. Part 1 of this series explains the basics of UGC and its benefits to e-commerce. Here in part 2, we’ll show you how to take advantage of UGC images in e-commerce and to upload, transform, and deliver them fast and seamlessly with Cloudinary.

Read on for the details:

Uploads

Because it’s impossible to foresee what images will be coming your way, you must take into account several considerations before uploading them, e.g., the file size of the images, where to place them, and the edits or transformations you might want to make before delivery. Cloudinary’s upload presets, for which you can prespecify a set of actions to take each time you upload media assets, offer the ideal solution:

  • File Size. Depending on your workflow, you can, for example, specify a maximum file size for all UGC-image uploads. If an image exceeds that maximum, have Cloudinary automatically downsize it during upload.
  • File Storage. You might want to have Cloudinary place all your UGC images in one folder to be reviewed before deciding whether to take them live. Furthermore, how about having Cloudinary apply tags to those assets upon upload through the upload preset or with artificial intelligence (AI)? Example tags are the item description, SKU number, campaign name, and event type. Besides helping you organize assets, tags are invaluable for search. Cloudinary’s advanced search features even enable you to search by multiple tags to locate the exact items you’re looking for.
  • Derivatives. If you need UGC images generated in different sizes for your product-detail pages (PDPs), in different aspect ratios for inclusion in emails or social media, or in different filters or colors, you can do that through Cloudinary during upload; the images are then ready to go. Alternatively, you can edit the originals directly with the specified transformations for storage.

Transformations

Nowadays, each company has its own brand and product style that portray a unique image that stands out from the similar brands being advertised, especially on social media. This signature look typically features a consistent look and feel for all the assets, whether they are displayed on the website or on social media and the like. To create such a uniformity, you must render similar filters or color adjustments to your media.

With Cloudinary, you can predefine named transformations to be applied all at once to your assets. For example, to fine-tune the saturation, brightness, and contrast levels, just set up the parameters in one shot and consider it done.

Cloudinary offers numerous image enhancement and transformation options, which you can apply manually in the UI or dynamically in the URL. A common and noteworthy option is to place an overlay on images with their creator’s social user-name to accord credit to that individual. Other customizations include underlays, animations, chaining, and so forth. The sky’s the limit so let your creativity fly!

Delivery

When your assets are ready, you’d want to ensure an optimal delivery. With Cloudinary, you can automate that process, ascertaining a display of the focal point of the images. Here are a few useful options:

  • Add f_auto to the image URL to have Cloudinary determine the best display format based on the user’s browser.
  • Add q_auto to the image URL to have Cloudinary’s quality algorithm shrink the file size as much as possible without visual degradation.
  • Add g_auto to the image URL to have Cloudinary find the most engaging part of the image and make that the focal point. By adding g_auto:subject, where subject is the object of focus, you can specify the centerpiece yourself.

    For example, to focus on a dress, add g_auto:dress to the URL, after which the algorithm will look for a dress in the image and, if it finds one, make it the focal point. Consequently, not only do your assets load faster and consume less bandwidth, Cloudinary also displays their most relevant part for an eye-catching effect.

With the many factors to consider while handling UGC assets, you must leverage a largely automated system that capably and efficiently handles the workflow. Cloudinary shines in being such a system. Next up in the series, we’ll elaborate on ways in which to manage UGC videos on the same platform.

Want to Learn More About UGC?

Recent Blog Posts

How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more