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

CoreMedia Adds Cloudinary to its CoreMedia Studio Platform

Today we’re pleased to announce a new technology partnership with CoreMedia, a leading Content Experience Platform provider. CoreMedia users can now leverage Cloudinary’s web-based digital asset management (DAM) solution to organize, search, manage and optimize their media assets, including images and videos, and to orchestrate, preview and deliver digital experiences consistently and optimized across all channels and browsers. The official press release is available here.

Read more
Facial-Surveillance System for Restricted Zones

In Africa, where Internet access and bandwidth are limited, it’s not cost-effective or feasible to establish and maintain a connectivity for security and surveillance applications. That challenge makes it almost impossible to build a service that detects, with facial-recognition technology, if someone entering a building is authorized to do so. To meet the final-year research requirement for my undergraduate studies, I developed a facial-surveillance system. Armed with a background in computer vision, I decided to push the limits and see if I could build a surveillance system that does not require recording long video footage.

Read more
Automate Placeholder Generation and Accelerate Page Loads

If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.

Read more
Best Practices for Optimizing Web Page Speed

If you're like most consumers today, you engage more with pictures or videos on a website than text. The stats don't lie - four times as many visitors would rather watch a video about a product than read about it, and sites with compelling images average twice as many views as text-heavy ones.

Read more
A day of fun with Girls Who Code and Cloudinary

During both my computer science studies and work in the tech field, there have not been a lot of women present. While our ranks have grown, women still make up only a small percentage. In many ways, I think the traditionally male-dominated world can be intimidating to women and girls who may be interested in pursuing these types of tech careers.

Read more
Chrome 67 Changed Client Hints for Responsive Images

In 2015, Chrome 35 added support for Client Hints. Client Hints are awesome! With Client Hints, you can simplify the HTML required for Responsive Images, ensure that images are crisp on high-DPR displays, and improve #webperf. At the time of writing, Chrome 35+ is the only browser to have adopted this standard. Cloudinary has introduced support with the w_auto, dpr_auto, and q_auto parameters.

Read more