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.

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 rich 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-CDN.

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 Cloudinary 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: Contact us to chat with our sales team, who will then guide you through the process of creating 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.

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 accross-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.

For example, with the interactive media optimization chart, you can experiment with different format and quality settings to see how your 100 most requested images would behave in terms of bytes saved and image fidelity (perceived similarity to the original), and then compare those findings with how those images behave according to your current Media Optimizer configuration.

The chart also highlights media assets in your site that are unnecessarily large, such as hero images, which directly affect your LCP score.

Media Optimization chart

Have a play! 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 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_all_derived_resources 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.

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.

Recent Blog Posts

Automate the Staging Process of Videos for Social Media

Rich and engaging media helps build customer engagement and trust but can be time consuming to stage. Developers save a tremendous amount of time by preparing videos for social media with Cloudinary. That’s because Cloudinary’s interface, widgets, and application programming interface (API) transform raw media into polished content, optimizing footage and enabling effortless customization and publishing.

Read more

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more