> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Optimize and deliver UGC


Once your users' content has been uploaded, managed, and transformed, the final step is to optimize it for fast, high-quality delivery on every device. This page covers on-the-fly optimizations for images and videos, and using the Cloudinary Video Player to deliver uploaded videos.

## Recommended features by use case

The table below shows which features we recommend (marked ✅) for each of the four [example use cases](user_generated_content#popular_applications_of_ugc) followed throughout this guide: profile pictures, video reviews, marketplace products, and try before you buy.

{table:class=no-borders overview textcenter}  | Profile pictures | Video reviews | Marketplace products | Try before you buy
---|---|---|---|---
[On-the-fly optimizations](#on_the_fly_optimizations) | ✅ | ✅  | ✅  | ✅ 
[Cloudinary Video Player](#cloudinary_video_player) | | ✅  | ✅  |  

## On-the-fly optimizations

User-generated content is no different to pre-defined content when it comes to optimizing delivery of assets to different devices. You'll want to make the image or video as light as possible for fast page-load times. You can do this by automatically detecting the best [format](media_optimization#format) to deliver the media, automatically compressing the media to maintain appropriate [quality](media_optimization#quality), and [resizing](media_optimization#resize) the media on the server side to its display dimensions on the client side.

Here's the profile picture, cropped to the right size for the display (`ar_3:4,c_fill,g_face,h_300`), delivered in the best format (`f_auto`) and optimal quality (`q_auto`):

![Optimized profile picture](https://res.cloudinary.com/demo/image/upload/ar_3:4,c_fill,g_face,h_300/f_auto/q_auto/docs/profile-pic.jpg)

```nodejs
cloudinary.image("docs/profile-pic.jpg", {transformation: [
  {aspect_ratio: "3:4", gravity: "face", height: 300, crop: "fill"},
  {quality: "auto"}
  ]})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/profile-pic.jpg")
  .resize(
    fill()
      .height(300)
      .aspectRatio("3:4")
      .gravity(focusOn(face()))
  )
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/profile-pic.jpg")
  .resize(
    fill()
      .height(300)
      .aspectRatio("3:4")
      .gravity(focusOn(face()))
  )
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/profile-pic.jpg")
  .resize(
    fill()
      .height(300)
      .aspectRatio("3:4")
      .gravity(focusOn(face()))
  )
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/profile-pic.jpg")
  .resize(
    fill()
      .height(300)
      .aspectRatio("3:4")
      .gravity(focusOn(face()))
  )
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```python
CloudinaryImage("docs/profile-pic.jpg").image(transformation=[
  {'aspect_ratio': "3:4", 'gravity': "face", 'height': 300, 'crop': "fill"},
  {'quality': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Format;
use Cloudinary\Transformation\Quality;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('docs/profile-pic.jpg'))
	->resize(Resize::fill()->height(300)
->aspectRatio("3:4")
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->delivery(Delivery::format(
	Format::auto()))
	->delivery(Delivery::quality(
	Quality::auto()));
```

```java
cloudinary.url().transformation(new Transformation()
  .aspectRatio("3:4").gravity("face").height(300).crop("fill").chain()
  .quality("auto")).imageTag("docs/profile-pic.jpg");
```

```ruby
cl_image_tag("docs/profile-pic.jpg", transformation: [
  {aspect_ratio: "3:4", gravity: "face", height: 300, crop: "fill"},
  {quality: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("3:4").Gravity("face").Height(300).Crop("fill").Chain()
  .Quality("auto")).BuildImageTag("docs/profile-pic.jpg")
```

```dart
cloudinary.image('docs/profile-pic.jpg').transformation(Transformation()
	.resize(Resize.fill().height(300)
.aspectRatio("3:4")
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.delivery(Delivery.format(
	Format.auto()))
	.delivery(Delivery.quality(
	Quality.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("3:4").setGravity("face").setHeight(300).setCrop("fill").chain()
  .setQuality("auto")).generate("docs/profile-pic.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("3:4").gravity("face").height(300).crop("fill").chain()
  .quality("auto")).generate("docs/profile-pic.jpg");
```

```flutter
cloudinary.image('docs/profile-pic.jpg').transformation(Transformation()
	.resize(Resize.fill().height(300)
.aspectRatio("3:4")
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.delivery(Delivery.format(
	Format.auto()))
	.delivery(Delivery.quality(
	Quality.auto())));
```

```kotlin
cloudinary.image {
	publicId("docs/profile-pic.jpg")
	 resize(Resize.fill() { height(300)
 aspectRatio("3:4")
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 delivery(Delivery.format(
	Format.auto()))
	 delivery(Delivery.quality(
	Quality.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("docs/profile-pic.jpg", {transformation: [
  {aspect_ratio: "3:4", gravity: "face", height: 300, crop: "fill"},
  {quality: "auto"}
  ]})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/profile-pic.jpg")
  .resize(
    fill()
      .height(300)
      .aspectRatio("3:4")
      .gravity(focusOn(face()))
  )
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```
> **NOTE**:
>
> If you're on a plan that includes [optimization by default settings](optimize_by_default_settings), you can select the **Automatic format** setting instead of modifying your URLs.
## Cloudinary Video Player

If users are uploading videos, you can take advantage of the [Cloudinary Video Player](cloudinary_video_player) to display them. 

The Cloudinary Video Player is a versatile HTML5-based solution designed for seamless video delivery across devices. It supports responsive layouts, offers built-in controls, and allows for video transformations at both player and individual video levels. The player supports popular video formats, adaptive bitrate streaming, and can host multiple players with different configurations on the same page. Customization options include themes, captions, chapters, and seek thumbnails, along with AI-driven highlights and event triggers.

Here's an example of the video player, playing a video with highlighted captions, seek thumbnails and AI-based highlights graph:

> **READING**:
>
> * [User-generated content](user_generated_content): Overview and the UGC workflow diagram.

> * [Upload UGC](user_generated_content_upload): Upload methods, upload behavior, access control, and transform on upload.

> * [Manage and analyze UGC](user_generated_content_manage_analyze): Moderate, scan for malware, analyze, transcribe, and automate workflows.

> * [Transform and customize UGC](user_generated_content_transform_customize): Improve quality, resize, standardize, watermark, and personalize.