Last updated: Nov-10-2022
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.
This walkthrough assumes that you have already signed up to create your Media Optimizer account and are now logged in.
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.
Enter a name for the optimization profile. Let's call it
Quick start example.
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:
- Click Connect a new media source.
- Complete the form:
Media source name: Enter a name for the media source, let's call it
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:
- Media source name: Enter a name for the media source, let's call it
- Click Save.
- Select the
cld-docs-assetsmedia source from the dropdown.
- Leave the Domain as it is - it will be of the format:
- Set the Path prefix to
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
genericas 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
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.
* If you don't see
auto_format_auto_quality_responsive_width as an option, you can manually create this transformation, or simply use
auto_format_auto_quality for now.
- Click Save to save the optimization profile.
- Click Enable Optimization Profile in the popup dialog.
We can now start delivering our media through Media Optimizer and see the benefits of the optimizations.
- Use the copy button on the Quick start example optimization profile to copy the optimization profile URL. In our case it's:
- Take the image URL:
and replace cloudinary-devs.github.io with the text that you copied. In our case it's:
- Paste this URL in a browser, and see the result:
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.
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|
There's a lot more to learn about Media Optimizer, for example:
- You can apply different transformations to different types of media using optimization profiles.
- You can connect more than one media source and add them to the same or different optimization profiles.
- If you want to use a custom domain, rather than
<cloud_name>.mo.cloudinary.net, you can configure a domain and use this in your optimization profile.
- If you are migrating from a platform that performs media optimizations, you can create a mapping function to avoid having to update every URL on your site manually.
- If you want to customize the transformations applied to your media, you can create named transformations and add these to your optimization profile.