Cloudinary Blog

Cloudinary Eliminates Complexity of Image Management for Complex Networks

Complex Networks Case Study

Solution

Complex Networks has been using Cloudinary since 2014 to manage and optimize images across seven websites and two mobile apps, making editorial workflow more efficient, improving page performance and load time, and increasing user engagement. Cloudinary was instrumental in enabling Complex Networks to redesign its web properties. Without the flexibility that Cloudinary offers to both creative and development teams, it would not have been possible for Complex Networks to achieve such a fast time to market.

Results

15-25% - faster page load time

Up to 20% - increase in user engagement

50%-90% - time savings for media management

Company

Complex Networks is a global lifestyle brand and media company, and one of the most influential voices in popular culture today. Complex Networks generates more than 1.1 billion video views a month across its digital channels – Complex, First We Feast, Rated Red, Pigeons and Planes, Sole Collector and more. Complex Networks is a Top 10 publisher in the U.S. for social engagement, and develops and distributes original programming for its channels and through output deals with distributors, including Netflix, Facebook, Fuse, Verizon, Snapchat, MSG and more. The company cultivates content that spans popular culture - from music to movies, sports to video games, fashion to food.

The Challenge: Manipulating, Optimizing, and Delivering Images

Complex Networks may be best known for its video content, but the publishing side of its business – featured across seven websites – is equally as important. From its inception, the company was using a variety of content management systems (CMS) for different sites, each one with its own image management process – from a WordPress module to proprietary image libraries, like PHP GD or ImageMagick.

The variety of CMS created unnecessary complexity for teams that worked on multiple sites. “The process was a burden for both editors and developers, who had to become well versed in multiple CMS, and know the formats, sizes and restrictions unique to each website,” said Complex Networks CTO Aleksey Baksheyev. “We had a manual that provided specifications for the sizes and formats for optimal delivery and performance, but each image had to be manually manipulated, which resulted in a very time-consuming process and slower time to market.”

All told, editors would typically have to create and upload as many as six different versions of an image per site, and oftentimes had to work with the development team to ensure the images were appropriate for the individual site – a process that could take up to an hour per image, with all the back and forth, to make changes, get the image approved and published on the CMS.

Even with these processes in place, Complex Networks found that many of its pages weren’t optimized because some editors did not follow the standards, uploading images that were too large, which caused page load time to slow and impacted visitors’ experiences.

The Cloudinary Solution: A Powerful Hub for Images

As Complex Networks started to transition from a monolithic infrastructure to microservices and a serverless architecture, the company sought a more streamlined way to handle images across all of its sites.

“In evaluating solutions, one of the main features we were looking for was the ability to optimize the performance of our images,” said Baksheyev. “What impressed us about Cloudinary was its URL-based transformations. It was very scalable, which was important as we were redesigning our sites and needed to think about asset migration and image resizing for the new designs. With Cloudinary, we only needed to change the URL parameters. That kind of built-in performance optimization and ease of use were selling points for us.”

Using Cloudinary, 99 percent of the images are now automatically transformed and optimized, which frees editors from worrying about the various parameters for each image as it would appear on a specific viewing context. Editors only have to upload one version of an image, and all the necessary changes happen on-the-fly – adjusting to browser, device, viewport, and other parameters – through Cloudinary.

“Now we don’t have to monitor every single aspect of different websites,” he added. “We know that images will be properly cropped to the right size, adjusted to the right format depending on which browser it is being viewed on, and delivered with the right quality settings to improve weight and load speed optimization.”

At the time of the transition, Complex Networks opted to develop its own proprietary CMS, which is integrated with Cloudinary serving as the image asset management system. All of the image assets in the CMS are automatically uploaded to Cloudinary, where they’re hosted and delivered. “By having one CMS, integrated with Cloudinary for image management, we have a single source of truth for images,” Baksheyev added. “This integration enables us to easily add, update or remove images across one or all websites when needed.”

The Results: Simplicity, Time Savings and Better Performance

Eliminating the need to create multiple versions of images, across a variety of CMS, streamlined the editorial workflow. Baksheyev estimates that editors and designers reduced the time it takes to upload and format images, and publish them on the CMS by 50 to 90 percent. Performance optimization ensured that page load time improved by up to 25 percent and engagement increased by 20 percent.

The flexibility and features of Cloudinary also resulted in additional benefits for Complex Networks. Baksheyev said that during the sites’ redesign, managing images could create some artificial restrictions on designers, forcing them to stay within strict dimensions for content and media blocks. The fluidity of the Cloudinary solution enabled a more dynamic, creative design process that wasn’t hampered by many of these restrictions.

Cloudinary’s flexibility also was evident in the company’s willingness to help Complex Networks address some of their unique requests. Working with the Cloudinary engineering team, they were able to tweak the image management process to add content-specific keywords while maintaining the original file names. Doing so ensured that images were properly indexed by search engines, improving SEO. Cloudinary’s engineering team also helped Complex Networks integrate the image management functionality with its own content delivery network (CDN), which enabled the media company to maintain existing contracts with its CDN providers.

Recent Blog Posts

A Guide to Website Image Optimization and Performance

Part 1 of this series delves into the background for this guide. Here in part 2 are the ins and outs.

Wait, hear me out. I know, we just talked about this: Nobody is sheepishly pleading you, “Please, might we have just one more image on the page?” No, I’m not telling you to pick that particular fight. Instead, use a little smoke and mirrors to avoid requests for images that your audience needn’t render right away and might never need at all while loading them asynchronously—only as needed.

Read more
A Guide to Image Optimization for Website Performance

I’ve spent a lot of time thinking about the rules of putting images on the web.

For such a flexible medium as the web, software development can feel like a painstaking, rules-oriented game—an errant comma might break a build, a missing semicolon might wipe out an entire page. For a long time, the laws of image rendering seemed similarly cut-and-dry: For example, if your markups contained an img element , the singular content of its src attribute would be foisted on the audience regardless of their browsing context, period.

Read more
Digital Asset Management Platform: Meeting Customer Expectations

Consumers today expect media-rich experiences. No longer a novelty, it’s second nature to swipe through multiple photos on mobile apps, zoom in on product images for a closer look, visualize online travel reviews, socialize cool video clips while browsing, and encounter brand messages when walking into brick-and-mortar stores. These experiences weave together visual cues and clues with relevant content to create meaning and more authentic connections for customers.

Read more
How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

Read more