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

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more