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

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more