Cloudinary Blog

Get Your Media Moving Faster with Cloudinary's New Media Optimizer

Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

It's time for you to learn about Cloudinary's newest product offering: Media Optimizer.


Fully Automated, No-Code Optimization


It Only Takes a MOment

Media Optimizer (or MO as it's affectionately called within Cloudinary) automates the format selection and quality settings of all your visual media so that your websites and apps become visually engaging and load fast.

It really does take only a moment to set up MO. You don't have to migrate your media anywhere; you don't have to touch your originals; you might not even need to update your website at all and, even if you do, it'll take no more than a simple search-and-replace across your source files.

Here's Your MOtivation

Core Web Vitals are definitely a major motivating factor for optimizing the media on your website. You don't want your site to slide down Google's rankings simply because you're delivering unnecessarily oversized images. That's not the only consideration, though. Delivering the right file size to your end-users, no matter which device they are on, saves them bandwidth, reduces page-load times, and leads to higher consumer satisfaction and conversions. After all, the bottom line is the bottom line.

"E-businesses must keep in mind the difference between file storage and file delivery, always prioritizing efficient delivery of images." - Harry Roberts

If you haven't already seen it, check out Satarupa Chatterjee's blog post for more details on the importance of optimizing media delivery and the ways that Media Optimizer can address those requirements.

And Here's the MOde of Operation

So, how does Media Optimizer work? It takes your media from wherever you store it and creates an optimized version of it, which it then delivers to your end-users through fast multi-CDN1.

Media Optimizer conceptual diagram

The first time an image or video is requested, it's not yet cached on any CDN, so Media Optimizer fetches the media from the source you configure - be that an S3 bucket, a Google Storage bucket, a web server, or even another Cloudinary2 account. Media Optimizer then performs on-the-fly transformations on the media files to optimize their dimensions, quality, format and encoding - whatever you've configured - before caching them on the best CDN for the requesting user, and delivering it to them.

Subsequent requests only need to go as far as the closest CDN cache, where your optimized media is ready and waiting.

Go Through the MOtions of Setup

Media Optimizer's Getting Started Guide describes how to set up Media Optimizer for your site. Here are the basic steps:

  1. Create an account: Sign up for free to create your Media Optimizer account.
  2. Create a media source - Log into your new Media Optimizer account, and specify where your media is stored and how to access it. Creating a media source
  3. Test your setup - Verify that you can request your media through your new Media Optimizer domain, https://<cloud_name>.mo.cloudinary.net, where <cloud_name> is the name you gave to your Media Optimizer cloud on creation.

    If an image URL in your site is currently https://www.mydomain.com/rest/of/the/path/myimage.jpg, and your cloud name is mycloud, you would update it to use this URL instead: https://mycloud.mo.cloudinary.net/rest/of/the/path/myimage.jpg.

If you want to continue using your own domain name to access your media, you need not change the URLs on your site. Just ask Cloudinary Support to configure the DNS routing and then specify your domain name in your delivery profile.3

What's a delivery profile? Well, the basic MO setup automatically adopts the default Media Optimizer delivery profile, which is why it's not mentioned in the steps above. In a nutshell, a delivery profile identifies a set of media assets by their delivery URLs, and defines how they are delivered based on the optimization transformations that you specify.

Default Media Optimizer delivery profile

So, the default delivery profile identifies every request to https://<cloud_name>.mo.cloudinary.net and fetches files from the media source that you defined, applying the default automatic format and quality optimizations.

You can set up multiple delivery profiles with different path prefixes to treat certain types of media differently. For example, the delivery profile URL https://mycloud.mo.cloudinary.net/images could specify optimization transformations for images, whereas https://mycloud.mo.cloudinary.net/videos could specify a different set of optimization transformations for videos.

You can also configure multiple media sources for a delivery profile. Thus, even though the basic setup for Media Optimizer can't be simpler, MO is also very flexible and can cater to complex requirements.

And There's MOre...

Another component of Media Optimizer is the mapping function, whose default is in the default delivery profile. The mapping function contains JavaScript code that enables Media Optimizer to analyze URLs, determine the path to the media, and identify any existing optimization parameters to map to transformations. The parameters could be from your existing delivery platforms or even classic Cloudinary (also known as Programmable Media).

You can opt for one of Cloudinary's predefined mapping functions, or create your own. Cloudinary Support would be happy to help you out. Our goal is for you to have to make the least changes to the existing URLs on your site.

Make the MOst of Cloudinary's Capabilities

Besides an easy setup, what else sets Cloudinary's Media Optimizer apart from other optimization solutions out there?

Automatic quality: Cloudinary is a leading force in image and video processing. Whereas most other optimization platforms use an across-the-board compression quality of 80 as the standard, Cloudinary's intelligent quality and encoding algorithms analyze each image or video to arrive at the best quality-compression level and optimal encoding settings based on the media content and requesting browser.

Automatic format: Similarly, Cloudinary determines the best file format to deliver media based on each user's browser, and reformats the source files on the fly so you need to supply only one format. And Cloudinary leads the way when it comes to file formats. For example, if a browser supports it, Cloudinary delivers an AVIF, which is one of the newest formats out there, offering more byte savings than other formats, such as JPEG and WebP.

Automatic cropping: When cropping images to a particular width and height, Cloudinary automatically decides which part to keep based on what Cloudinary's deep learning algorithms determine to be the most important part of the image.

MOnitoring Improvements

The Media Optimizer console's dashboard and reports help you monitor your media assets by providing insights on their performance.

Performance reports

You might find that a hybrid configuration works best for your site, whereby you can have a delivery profile for certain media that do not need to be of optimal quality, and another delivery profile for media that must be of superb appeal.

ReMOte Updates

Media Optimizer also comes with its own API. Though you might never need to leverage it, the capability is in place if you ever want to automate configurations or produce your own reports. It also gives you control over your cache so that you can:

  • Warm up your cache: If you have a transformation that might take a while to be applied to large media assets on the fly and you want them ready pre-generated before the first request, you can send the relevant delivery URLs to the cache_warm_up endpoint. You'll be notified when the derived media is ready in the cache.
  • Invalidate your cache: If you update a source file or change a named transformation, you must clear the cache to deliver the correct media. For that, use the invalidate endpoint.

You're AlMOst There...

You now have an understanding of Media Optimizer: how quick it is to set up, how it can help make your site load lightning fast with full control over quality and how you can measure your media's performance. Just perform two simple steps:

  1. Sign up for a free or paid Media Optimizer account.
  2. Connect Media Optimizer to your media sources.

Our docs contain many comprehensive details, so be sure to have a look. Also remember: our fabulous Support Team is always on hand for questions.

Once you've implemented Media Optimizer for your boss, be sure to ask him for that proMOtion!

Media Optimizer Webinar
Join our latest webinar with web-performance guru Tim Kadlec and Cloudinary technology expert Yaron Reichert, Bet Your Luck on Web Performance.

  1. Scale and Enterprise plans only.
  2. Enterprise plans only.
  3. Custom domains are not available in the free plan. They are available in the scale plan at an additional cost.

Recent Blog Posts

How to Apply Riveting Image Effects in Nuxt Applications With Cloudinary

Nowadays, no way can we build modern apps for the web without considering visuals, which are one of the most efficient ways of communicating online. However, improvements in image quality over the years have exacted a price in larger files, slowing down page loads, especially in low-bandwidth regions or on mobile devices. To resolve that conundrum, turn to Cloudinary, a platform that offers the infrastructure for managing images in web apps. Additionally, Cloudinary’s reliable APIs serve visuals through multiple, fast content delivery networks (CDNs).

Read more
The Pros and Cons of AVIF for Websites

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more