> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # 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](media_optimizer). 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](https://console.cloudinary.com/console). ## Create an optimization profile An optimization profile encapsulates everything you need to configure to get Media Optimizer up and running, including the [media source](#media_sources), [path prefix](#optimization_profile_url) and [base transformation](#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**. ![Create an optimization profile from Getting Started tab](https://demo-mo-docs.mo.cloudinary.net/cld-docs-assets/assets/images/getting_started_tab.png?tx=c_scale,w_500/dpr_2.0 "width: 500, popup: true") * From the **Dashboard** tab, click **Add Optimization Profile**. ![Create an optimization profile from Dashboard tab](https://demo-mo-docs.mo.cloudinary.net/cld-docs-assets/assets/images/dashboard_tab.png?tx=c_scale,w_500/dpr_2.0 "width: 500, popup: true") * From the **Configuration** tab, click **Optimization Profiles > Configure Your First Optimization Profile**, or **Add New**. ![Create an optimization profile from Configuration tab](https://demo-mo-docs.mo.cloudinary.net/cld-docs-assets/assets/images/configuration_tab.png?tx=c_scale,w_500/dpr_2.0 "width: 500, popup: true") ### 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](https://github.com/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: ![Unoptimized image of shoes](https://cloudinary-devs.github.io/cld-docs-assets/assets/images/shoes.jpg "with_image:true, with_url:true, width: 300") * Videos are accessible from _**https://cloudinary-devs.github.io/cld-docs-assets/assets/videos**_, for example: ![Unoptimized video of shoes](https://cloudinary-devs.github.io/cld-docs-assets/assets/videos/shoes.mp4 "with_image:false, with_url:true") ![Unoptimized video of shoes](https://res.cloudinary.com/demo/video/upload/docs/Shoes_-_11284.mp4 "with_image:true, with_url:false, with_code:false, width: 300, popup: true") Connect to this media source as follows: 1. Click **Connect a new media source**. 1. 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_ ![Connect a media source](https://demo-mo-docs.mo.cloudinary.net/cld-docs-assets/assets/images/quickstart_media_source_uplift.png?tx=c_scale,w_400/dpr_2.0 "width: 400, popup: true") 1. Click **Save**. 1. Select the `cld-docs-assets` media source from the drop-down list. #### Optimization profile URL 1. Leave the **Domain** as it is - it will be of the format: `.mo.cloudinary.net`. 1. 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://.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. ![Create an optimization profile](https://demo-mo-docs.mo.cloudinary.net/cld-docs-assets/assets/images/optimization_profile_quick_start.png?tx=c_scale,w_401/dpr_2.0 "width: 400, popup: true") > **NOTE**: > > * If you don't see `auto_format_auto_quality_responsive_width` as an option, you can [manually create this transformation](media_optimizer_transformations#manually_create_auto_format_auto_quality_responsive_width), or simply use `auto_format_auto_quality` for now. ### Step 3: Save and enable the optimization profile 1. Click **Save** to save the optimization profile. 1. 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**_ ![Optimization profile](https://demo-mo-docs.mo.cloudinary.net/cld-docs-assets/assets/images/quick_start_example.png?tx=c_scale,w_700/dpr_2.0 "width: 700, popup: true") Yours will have your cloud name instead of _**demo-mo-docs**_. 1. Take the image URL: ![Unoptimized image of shoes](https://cloudinary-devs.github.io/cld-docs-assets/assets/images/shoes.jpg "with_image:false, with_url:true")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_ 1. Paste this URL in a browser, and see the result: ![Optimized image of shoes](https://demo-mo-docs.mo.cloudinary.net/generic/cld-docs-assets/assets/images/shoes.jpg "with_image:false, with_url:true, width: 400, popup: true") Served from web address186 KB (JPEG) Served through Media Optimizer40 KB (AVIF)* Similarly for the video: ![Optimized video of shoes](https://demo-mo-docs.mo.cloudinary.net/generic/cld-docs-assets/assets/videos/shoes.mp4 "with_image:false, with_url:true, width: 400, popup: true") Served from web address2.52 MB (MP4) Served through Media Optimizer431 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](https://chromewebstore.google.com/detail/cloudinary-media-inspecto/ehnkhkglbafecknplfmjklnnjimokpkg) 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. {table:class=no-borders-small-first-column}| | ---|--- ![Web address icon](https://cloudinary-res.cloudinary.com/image/upload/c_scale,w_30/v1644938254/docs/media_optimizer/icons/ms-web.svg "popup:false, width:30px") | [Deliver from a web address](media_optimizer_quickstart_web_address) ![AWS S3 icon](https://cloudinary-res.cloudinary.com/image/upload/c_scale,w_30/v1644938254/docs/media_optimizer/icons/ms-aws_1.svg "popup:false, width:30px") | [Deliver from an AWS S3 bucket](media_optimizer_quickstart_aws_s3) ![Google Storage icon](https://cloudinary-res.cloudinary.com/image/upload/c_scale,w_30/v1644938254/docs/media_optimizer/icons/ms-google_1.svg "popup:false, width:30px") | [Deliver from a Google Storage bucket](media_optimizer_quickstart_google_storage) ![HTTP Proxy icon](https://cloudinary-res.cloudinary.com/image/upload/c_scale,w_30/v1644938254/docs/media_optimizer/icons/ms-htp.svg "popup:false, width:30px") | [Deliver using an HTTP proxy](media_optimizer_quickstart_http_proxy) > **Learn more about Media Optimizer**: > > 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](media_optimizer_configuration#create_a_delivery_profile). > * You can connect more than one [media source](media_optimizer_configuration#connect_a_media_source) and add them to the same or different optimization profiles. > * If you want to use a **custom domain**, rather than `.mo.cloudinary.net`, you can [configure a domain](media_optimizer_configuration#create_a_custom_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](media_optimizer_configuration#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](media_optimizer_transformations) and add these to your optimization profile.