Media Optimizer walkthrough

For a complete overview of Media Optimizer and how it can help you to optimize the media on your site, see the Media Optimizer Overview.

This walkthrough demonstrates how to set up Media Optimizer using an existing media source. You can follow along in your own account to see how easy it is to set up. Then later, you can connect your own media source and update your own delivery URLs for your own site.

Prerequisites

This walkthrough assumes that you have already signed up to create your Media Optimizer account and are now logged in.

Create an optimization profile

An optimization profile encapsulates everything you need to configure to get Media Optimizer up and running, including the media source, path prefix and base transformation.

Step 1: Start configuring an optimization profile

You can start configuring an optimization profile in any of these ways:

• From the Getting Started tab, click Configure an Optimization Profile.
  
  
• From the Dashboard tab, click Add Optimization Profile.
  
  
• From the Configuration tab, click Optimization Profiles > Configure Your First Optimization Profile, or Add New.
  
  

Step 2: Complete the form

Optimization profile name

Enter a name for the optimization profile. Let's call it Quick start example.

Media sources

For this walkthrough, we're using an existing media source that we can access through a web address. It's set up through GitHub Pages from our cloudinary-devs/cld-docs-assets GitHub repo. All our original assets that we want to optimize are stored here.

• Images are accessible from https://cloudinary-devs.github.io/cld-docs-assets/assets/images, for example:

  

• Videos are accessible from https://cloudinary-devs.github.io/cld-docs-assets/assets/videos, for example:

Connect to this media source as follows:

1. Click Connect a new media source.
2. Complete the form:
   • Media source name: Enter a name for the media source, let's call it cld-docs-assets.
   • Type: Select Web Address.
   • URI base: Enter https://cloudinary-devs.github.io. Notice that this is the base part of the URLs that we use to access our media currently:
     https://cloudinary-devs.github.io/cld-docs-assets/assets/images/shoes.jpg
     
     
3. Click Save.
4. Select the cld-docs-assets media source from the dropdown.
   

Optimization profile URL

1. Leave the Domain as it is - it will be of the format:
   <cloud name>.mo.cloudinary.net.
2. Set the Path prefix to generic.

   The path prefix acts as an identifier for the optimization profile. In general, we recommend setting it to something meaningful for the media that you'll be optimizing using this path - we've used generic as we're intending to use this optimization profile for all media. You can create further optimization profiles to apply specific transformations to different types of media.

   Notice how the URL example changes to https://<cloud name>.mo.cloudinary.net/generic.

Base transformation

Leave this as auto_format_auto_quality_responsive_width^*. This transformation is recommended for all media. It automatically changes the format and quality level of your media and limits its width based on the viewing device to deliver every asset in the optimal way.

Step 3: Save and enable the optimization profile

1. Click Save to save the optimization profile.
2. Click Enable Optimization Profile in the popup dialog.

Try it out

We can now start delivering our media through Media Optimizer and see the benefits of the optimizations.

1. Use the copy button on the Quick start example optimization profile to copy the optimization profile URL. In our case it's:

   demo-mo-docs.mo.cloudinary.net/generic
   
   
   Yours will have your cloud name instead of demo-mo-docs.

2. Take the image URL:
   
   
   and replace cloudinary-devs.github.io with the text that you copied. In our case it's:

   https://demo-mo-docs.mo.cloudinary.net/generic/cld-docs-assets/assets/images/shoes.jpg

3. Paste this URL in a browser, and see the result:
   Served from web address
   186 KB (JPEG) Served through Media Optimizer
   40 KB (AVIF)*
   Similarly for the video:
   Served from web address
   2.52 MB (MP4) Served through Media Optimizer
   431 KB (WEBM)*

See the size and format for yourself using whatever media inspection tools your browser provides when you right-click on each image, or try the Cloudinary Media Inspector browser extension.

*Depending on your browser, you may see a different format and size.

What next?

Now that you've seen how it's done using our media source, have a go at connecting your own media source.

	Deliver from a web address
	Deliver from an AWS S3 bucket
	Deliver from a Google Storage bucket
	Deliver using an HTTP proxy