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 New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more