Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Ecosystem Expanded: Cloudinary

Tarek El Deeb
Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

For the longest time growing up, my mother would make me a jam sandwich to take to school for lunch. It was just one of those things. The sun rises & sets, we all get hungry, and I get a jam sandwich a day to appease my hunger. One day, while my mother was watching her favorite cooking show, the chef started making the perfect PB&J sandwich, as he proudly called it. To my mother, this was a good experiment to try on her son, and for me, it was the beginning of my love of peanut butter. The concept of merging peanut butter to jam, that chef was a genius, no question.

I had a similar experience when I first learned about Cloudinary and their Storyblok integration. The concept of merging these two complementary technologies together is a stroke of brilliance and one that you may not have considered today - but I hope to change that by the end of this article. To give you an idea of how close Cloudinary & Storyblok are to peanut butter and jam, both organizations are part of the prestigious MACH Alliance, an industry body that advocates for open and best-of-breed enterprise technology.

Section titled Cloudinary clout Cloudinary clout

Based out of Santa Clara - California, Cloudinary is an innovative organization whose sole goal is to ‘help companies unleash the full potential of their media to create the most engaging visual experiences.’ In the 10 years since their founding, Cloudinary have made a name for themselves on the market by developing a breakthrough technology from the ground up, re-evaluating how we upload, manage and deliver millions of images and videos to our consumers. By leveraging artificial intelligence (AI), automation, and patented image/video processing capabilities, Cloudinary has become the go-to organization for delivering fast and flawless visual experiences at scale.

Cloudinary’s mission is to empower companies to deliver visual experiences that inspire and connect by unleashing the full potential of their media. With 60 billion assets under management and nearly 10,000 customers worldwide, Cloudinary is the industry standard for developers, creators and marketers looking to manage, transform, and deliver images and videos online. As a result, leading brands like Atlassian, Bleacher Report, Bombas, Grubhub, Hinge, NBC, Mediavine, Minted, Peloton and Petco are seeing significant business value in using Cloudinary, including faster time to market, higher user satisfaction and increased engagement and conversions.

One of Cloudinary’s main focus points is their Digital Asset Management tool (DAM). Built to house a plethora of content with agility and flexibility, the Cloudinary DAM is the tip of the spear when it comes to storing your content. Completely decoupled from the CMS, the asset library allows developers to build and integrate faster, and allows marketers to leverage prebuilt widgets to extend the DAM’s functionalities, such as enabling users to upload files from various sources. The Cloudinary DAM also allows for AI tagging, metadata management for further extendability, and content editing tools such as image/video resizing, cropping, and even AI-based manipulation to get the most out of the content you put out into the world.

Section titled Delivering visual experiences Delivering visual experiences

Competing and thriving in today’s visual economy requires brands to deliver exceptional visually-rich digital experiences. These experiences must be engaging, personal and consistent across ever-multiplying digital touch points. However, the sheer volume of visual media required to achieve this is, very simply, humanly impossible to manage.

What’s more, traditional monolithic platforms simply don’t offer the control and flexibility that experience-obsessed brands demand.

In order to efficiently deliver highly engaging visual experiences at scale, brands need an intelligently automated, end-to-end rich media management and delivery SaaS platform to act as the essential media layer of the digital experience tech stack.

The Cloudinary Media Experience Cloud does exactly this. It enables the creation of captivating digital experiences through a complete range of programmable media and media asset lifecycle applications - making visually captivating digital experiences possible everywhere.

Section titled Storyblok x Cloudinary integration Storyblok x Cloudinary integration

Cloudinary helps its customers unleash the full potential of their digital media. WIth Cloudinary, users can transform images and videos to load faster with no visual degradation, automatically generate image and video variants, and deliver high quality responsive experiences to increase conversions. Even more importantly, the intelligent automation that Cloudinary provides makes it possible for some of the world’s largest brands to do this at a scale that developers could never handle manually.

Within the current iteration of the Cloudinary integration, you can replace Storyblok’s internal asset manager with the Cloudinary DAM, a powerful asset manager with a vast array of capabilities. Once you add the integration to Storyblok and start pulling in your assets, your digital landscape multiplies. You can edit, transform, manipulate, and apply tags to your assets to ensure that they are being used as intended.

Section titled Future plans for the integration Future plans for the integration

As with any piece of technology, the updates and improvements never stop. We’re all on a constant journey of self-improvement and the same can be said for our technologies. Cloudinary and Storyblok have a lot of new and quite revolutionary features planned for the next iteration of the Cloudinary integration, and this is what we plan to add:

  1. Global settings for your assets: Soon, you’ll be able to select multiple pieces of content and change their settings collectively. An update on one setting will collectively update that same setting on the rest of your content. For example, using Cloudinary’s best practices for format (f_auto) and quality (q_auto) will cause the integration to calculate how many pixels can be removed without a visible difference, which you can then apply globally to all your assets and reduce the total file size allowing for LCP improvement (faster load time) and end-users having a better experience. Another example would be if you need to apply a logo or watermark to your assets, you can do so globally as well, reducing the time it takes to update each asset individually. A common use case and best practice would be to use a default image in case you delete or move an asset. A d_image-name is a simple transformation that will show a logo, blank, or whatever image you choose in case the intended image goes missing. This will prevent the user from getting a 404 error or a broken image picture.
  2. Manage your Metadata: A heavily requested feature update is the ability to control, manage, and edit your content metadata. Content and assets will be indexed so that they are easier to find in search results when you look for them. Content metadata is also useful in Cloudinary as you can apply conditional transformations based on metadata. For example, every time an asset has a tag called ‘sale’ you can overlay a sales banner image, and the assets without the tag will not have a banner.
  3. Focal Point Tracking: Cloudinary’s revolutionary focal tracking allows you to set a focal point on your images and video for better AI manipulation. Cloudinary has a transformation called gravity auto (g_auto) for images and videos. For both images and videos, we use AI to determine the focal point so you can crop in bulk or for different display sizes. You can set the focal point manually as well if you prefer. In addition, Cloudinary has an object detection add-on that allows you to auto tag what's in an image and crop around the image. For example, if you're selling a handbag you can have the handbag be the focal point instead of the model displaying it.

Reach out to Cloudinary's team to learn more about the fantastic solutions they provide.