2 21

State of
Visual Media

Read the Report →

Foreword

The Path to Better Connections is a Visual One.

Welcome to Cloudinary’s 2021 State of Visual Media report. For our third annual report, we analyzed data across more than 670 global customer brands to gain insights into how visual media content is produced, managed, viewed, and consumed.

Spanning 10 vertical industries with a representative sampling of more than 80 billion transactions per month, the data we analyzed for this year’s report emphasizes the degree to which the visual economy is impacting brands and the way they engage and connect with audiences. With visuals at the center of this new world of digital engagement, or what we call visual-first engagement, most brands upload new image and video assets every day, from dozens to thousands. One of our largest retail customers saw its visual content bandwidth increase by 129% from 2019 to 2020, and is on track to see another massive increase in 2021. In March 2021 alone, Cloudinary managed and delivered an average of 2.4 million image and video assets per customer.

By tapping into this treasure trove of data, produced by some of the world’s most popular brands, we’ve identified several key trends in visual engagement, including trends shaped by the pandemic and our increased reliance on digital forms of communication and connection. We also take a look at what’s needed to raise the bar on these visual-first experiences as we return to a post-pandemic world — a world in which fast and flawless visual content will remain critically important across all facets of our lives.

Key findings from the 2021 Report include:
In uncertain times, brands need the ability to upscale and downscale. Chapter 1: Covid Impact →
It's time to harness automation and embrace AI. Chapter 2: Visual Mastery →
Brands are using a wide variety of image formats. Chapter 3: Image Formats →
Video traffic grew significantly during the pandemic. Chapter 4: Video Demand →
Mobile-first responsiveness is a must. Chapter 5: Responsive Codecs →
Brands must prepare images and videos for microbrowsers. Chapter 6: Microbrowsers →

So dig in and let us know what you think.

Benji Azaria Director of Data Science, Cloudinary

Chapter 1: Covid Impact

Picturing the Impact of the Pandemic

During 2020, the power of visual content had new meaning.

Images and videos kept us connected and engaged in new ways — at work, at school and at home. Videos in particular provided a gateway to a world outside our locked down realties. Not surprisingly, image and video requests on Cloudinary’s platform increased significantly. From January 2019 to December 2020, video related traffic on Cloudinary had nearly doubled to 12.79% of total traffic, and the average percentage of monthly bandwidth for video rose from 18.97% to 26.74%.

However, these figures vary significantly by industry, and we can directly correlate the volume of visual media requests to that industry’s health. Some saw “epic scale” growth where others experienced significant deflation.

Video Traffic and Bandwidth
Click to toggle between data
0
Traffic
0
Bandwith
By Industry
Pre-pandemic through December 2020
E-Learning
2x
E-Commerce
20%
Food Delivery
2x

In harsh contrast, the travel industry – for obvious reasons – saw dramatic downward trends since the start of the pandemic. Until March 2020, the median percentage of video bandwidth in this industry was quite high with peaks of 23%. The video traffic plummeted to 1-5% of pre-pandemic image use levels.

These traffic troughs are a challenge. Many CDN providers base their fixed monthly fees on peak viewing bandwidth usage. As a result, the monthly fees increase the more often an image or video is viewed. If companies have significantly fewer visitors during off-season times or experience dips in traffic during a crisis like the pandemic, their monthly fee stays the same. A fairer approach is to charge a flat fee according to the size (in bytes) of the resource, as this also reduces the cost when there is less traffic on a website.

When traffic peaks occur, maintaining site performance is the primary challenge, along with avoiding slow loading times, and ensuring a high-quality user experience. This becomes especially important with Google’s Core Web Vitals directly impacting search rankings. Without a tool to automatically optimize images and videos, and guarantee bandwidth and image quality are well balanced, meeting all of these requirements is almost impossible. More information on what you need to consider can be found in the next two chapters.

Use Case

VELTRA, Japan’s leading online travel experience marketplace, adopted Cloudinary’s advanced image optimization technology, delivered as an Amazon CloudFront service from the Amazon cloud, to enable maximum flexibility and greater efficiency to on-going COVID travel sector disruption. As a result, VELTRA — a play on the word TRAVEL — is now set up to deal with whatever the market demands from it in the next phase of post-pandemic leisure experiences.

Read the case study

Cloudinary also has a fixed monthly fee, but with Amazon CloudFront, the CDN is fully charged on a pay-as-you-go basis, which we benefit from because it reduces the cost when there is less traffic on our website. We found Cloudinary’s service to be a good fit in terms of cost, as well as its many image management functions.

Naoyuki Matsuo Vice President of Technology Service Planning and Technology Veltra
Pro Tip

Beyond downscaling and upscaling, adopting a multi-CDN approach is critical when it comes to protecting your site against outages, internet breakdowns and inevitable traffic spikes and demands.

Want to learn more? Get the Report

Chapter 2: Visual Mastery

Visual Mastery to Move Beyond the Basics

The modern visual workflow involved with routinely uploading images and videos requires an entirely new set of skills.

Our data suggests most brands fully embrace the most established visual transformations and automations, but are still making their way toward adopting more advanced capabilities. Today’s content and user experience teams need to continue developing their visual mastery to transform images and videos so that they can break through the visual cacophony without sacrificing load times and bandwidth constraints.

Fortunately, most customer brands that use images heavily are saving time and developer resources by automating the most routine transformations.

Top 5 Media Manipulations
99% Dynamic Resizing
75% Automatic Quality Compression
69% Automatic Format Selection
40% Automatic Responsive Delivery
17% Intelligent Cropping

Most brands today fully understand the need to strike the optimal balance between file size and quality (75%) and rely on automatic format selections to ensure the best format is delivered (69%). Cropping transformations, which automatically remove parts of an image to either fit it into a required aspect ratio or to highlight a specific image area, are also incredibly popular and leveraged by most of the companies analyzed (63%).

Not surprisingly, a high number of media properties (56%) are harnessing the power of more advanced transformations, like intelligent cropping where detected faces are optimally positioned within an image crop.

Although we see huge untapped potential for brands to gain better business and financial outcomes by raising their visual mastery, we aren’t too surprised advanced capabilities are slow to be adopted. Brands are managing huge volumes of new content every day, and nailing the basics is a critical first step to success. Once that foundation is in place, expanding one's visual engagement toolkit is a natural next step. For inspiration look to digitally native companies that were born on the web, like Cloudinary's customer MADE.COM.

Use Case

Rooted in the belief that great design should be available to everyone, MADE.COM firmly understands that its customer journey has to recreate as much of the physical experience as possible online. As a leading digital lifestyle brand for home goods with experiential showrooms across seven locations globally, the customer experience (CX) users get from its desktop and mobile online presence must be of the absolute highest standards, like its carefully chosen makers and materials. This bar has been met through a recent site rebuild with Cloudinary’s technology, guaranteeing the kind of engaging visual experiences MADE’s shoppers have come to love.

Read the case study

We needed to make sure the products were the hero…We needed bigger, sharper images that really give you the detail of the fabrics we use, and we also wanted the option to easily change background colors. Grey backgrounds help frame product images while adding shadows gives depth. But we didn’t want to add such background effects to the images themselves to ensure they’d be future-proof for any brand design updates.

Spencer Wong Head of Digital Experience Made.com
Take the lead

Embrace advanced AI-enabled visual transformations like autotagging, background removal, and intelligent cropping to take your website from good to great and stand out in today’s visual economy.

Want to learn more? Get the Report

Chapter 3: Image Formats

Modern Web, Modern Formats

Today’s visual economy comes with a wide variety of available image formats, with most brands relying on three or four different image formats to tell their stories.

According to our data, in October 2019 60% of our customers used three or more formats and by March 2021 that number had risen to 71%.

More established formats like JPEG date back to the 1990s but newer, more modern formats like WebP have emerged in the last decade. It’s no surprise that JPEG – the lowest common denominator that displays well on all types of browsers and devices – remains the most frequently used image format (95%). PNG ranks second with 73%, and WebP with 69% is close behind in third place. Our data also shows that WebP adoption has grown since 2019 and is on track to overtake PNG. This development could be as a result of Safari adopting WebP in macOS Big Sur and iOS 14.

WebP’s momentum comes as little surprise when you consider the following data: the average WebP file size is roughly 20% smaller than the average JPEG. Another more lightweight format that grew in adoption was JPEG 2000, with an average size that sits in the middle of WebP and JPEG. In October 2019, just 4.5% of brands used the JPEG 2000 format and in March 2021 usage exploded to 25% - an increase of more than 450%.

The adoption rate of JPEG XR – also known as WDP, developed by Microsoft – went the opposite way: from 33% in October 2019 to 6% in March 2021. And newer formats like HEIC and AVIF still have very low adoption rates, though HEIC saw a noticeable increase from 0.2% in October 2019 to 2.1% in March 2021 with our customers.

Top 3 Formats
Click to toggle between data
95%
73%
69%
All
JPEG
PNG
WEBP
Other codecs
Usage rate from October 2019

One reason lightweight formats may have grown in popularity in 2020 might be companies’ preparations for the June 2021 launch of Google’s Core Web Vitals. These three metrics measure web performance and give search result priority to sites that prioritize the user experience. The first metric, Largest Contentful Paint (LCP), refers to how long the largest object on a site (usually an image) takes to load before a site visitor can see it completely. Google recommends keeping the LCP under 2.5 seconds. Data from the 2020 Web Almanac revealed that more than 47% of desktop and 57% of mobile websites must improve their LCP to meet Google’s criteria. The increase in WebP and JPEG 2000 usage in the second half of 2020 and the first quarter of 2021 suggests that companies have heard and acted on these search-affecting warnings.

With Core Web Vitals impacting search rank, we will likely see more companies interested in replacing JPEG where possible. The new JPEG XL format, based on Google’s PIK codec and Cloudinary’s Free Universal Image Format (FUIF) codec, is a promising candidate here. JPEG XL can not only reduce file size by 50%, but it is also the first “JPEG-replacement” candidate with a plausible transition path.

The new kid on the block

JPEG XL is a royalty-free raster-graphics file format that supports both lossy and lossless compression.

The format targets the capture, storage, archival, transmission, and distribution of photographic images, as well as graphics, illustrations, mixed contents (e.g. screenshots) and animations.

  • Responsive Web
  • Wide colour gamut
  • High Dynamic Range (HDR)
  • Legacy transition features
  • Effective compression at high visual quality
See how JPEG XL compares to other image codecs in the Battle of Codecs.
Get the graphic

As roughly 60% of most of today’s website data is taken up by images, cutting file size in half from the current JPEG standard to JPEG XL could reduce bandwidth requirements by up to 25-30%.

Dr. Jon Sneyers Senior Image Researcher at Cloudinary and Co-chair of the JPEG XL Community

Chapter 4: Video Demand

The Continued Rise of Video

No doubt video remains a critical medium for visual storytelling.

From January 2019 and through the pandemic, video requests on our platform doubled from 6.8% to 12.79%, and video bandwidth grew by more than 140% in Q2 2020. And while managing video is far more complex than managing images, there are fewer video codecs than image codecs to handle.

Among the brands in our study, the h264 video codec is the clear winner with an adoption rate of more than 98%, however other formats are slowly gaining momentum.

98%
H264 Adoption Rate
Other codecs
Usage rate from October 2019

We also looked at differences between mobile versus desktop delivery. Our data showed that the h264 (21%) and HEVC (20%) formats are delivered much more often to mobile web browsers than VP9 files, which are mainly delivered to desktop browsers (29%).

No doubt managing video codecs can be complex. But that's not stopping brands from managing and transforming more video content than ever before. Our heaviest video users are transforming their video assets 17 times on average, not too far behind our heaviest image users which transform their images 20 times on average. See Chapter 5 for more.

Brands should consider how AI is making it much easier to transform and manage video at scale, such as:

Shoppable videos for e-Commerce that bring products to life and link shoppers to the relevant product pages where they can make purchases.

Learn more

3D videos that allow brands to generate 360-degree animated images from a 3D model; generate a 360-degree video from a 3D model; or generate a single, stand-alone image from a 3D model.

Learn more

Video is absolutely everywhere, even in places where you might not expect to see it. As an example, Vorwerk uses Cloudinary to deliver short videos directly to the user interface of its Thermomix kitchen appliance. This requires special codecs, as video generates a lot of data that is compressed before delivery.

Use Case

Vorwerk relies on Cloudinary to manage and deliver high-quality images and videos quickly and flawlessly to millions of Thermomix® customers using its “Cookidoo®” recipe platform. Hosting more than 66,000 digital recipes, Cookidoo® is available not only through the web and mobile applications, but also through the new generation of Thermomix® smart kitchen appliances TM6, bringing the Internet of Things (IoT) to life in the kitchen. With Cloudinary’s media experience platform, Vorwerk can deliver on its quality promise through compelling visual assets and a seamless global brand experience.

Read the case study

Cloudinary allowed Vorwerk to deliver image and video content fast, without interruptions, in all served markets, on all its devices, including the Thermomix® IoT-appliances.

Sebastian Röhren Senior Solution Architect Digital R&D Vorwerk
Meet the codec

Lean and powerful — The open, royalty-free video codec AV1 was specifically designed for Internet video transmissions.

More than 100 coding tools give more options to improve performance.

Same visual quality as VP9 codec with at least 30% bitrate savings

Chapter 5: Responsive Design

Activate the Benefits of Responsive Design

According to April 2021 data from Statista, mobile accounts for approximately half of web traffic worldwide.

This trend is confirmed by our usage data as well. During the last year, mobile devices generated 51.4% of traffic, with significant regional differences: in the US, mobile accounted for 47.7%, in Germany 50.2%, in the UK 56.8% and in India 81.3%.

This means that companies need to ensure all images and videos are responsive and optimized for mobile devices. Historically, this meant content teams needed to store multiple versions of every image and video to appear correctly in different viewing windows, including landscape and portrait orientations. Given that most brands now upload images every day, this is a difficult task. It’s not just about delivering responsive images and videos but also about delivering them at scale.

Mobile traffic by region
Click to toggle between data
51.4%
47.7%
50.2%
56.8%
81.3%
All
USA
GER
UK
IND
The industries getting responsive right
Interest Activities & Leisure
2
E-Commerce. Shopping, & Lifestyles
1
Computers, Electronics & technology
3

When comparing responsive design usage, it is applied more often to videos than images across all industries. Those not using responsive design for images are losing an opportunity to score highly for Google’s Core Web Vitals, which are all about user experience. Given that half of the world’s web traffic comes from mobile, images – not just videos – should also load perfectly well. Optimizing for responsiveness will not only please the almighty Google algorithm, but customers will appreciate it as well.

Episode 08 Mediavine’s CEO on what brands must know about Core Web Vitals Watch the podcast

Use Case

An antiquated image management system, incompatible with modern browsers and devices, was making it increasingly difficult for GUESS to deliver an exceptional user experience. The vast majority of customers (76%) look at products on smartphones, so when GUESS was redesigning its viewer, they wanted to deliver the best mobile experience possible. However, the company also had to take into consideration that many customers completed their purchase on the desktop. Cloudinary’s auto-responsive Product Gallery provided GUESS the flexibility needed to deliver the same, high-quality user experience, regardless of device. With greater automation and continued technological innovation, Cloudinary has driven greater efficiency and organization in the workflow for the GUESS creative studio, merchandising team, and developers, while significantly improving performance for even the most image-rich pages.

Read the case study

The ability to navigate the online store better, on both desktop and mobile, and view the products faster, either on the product listing or product detail pages, was a key component to the conversion improvements. Any improvement on the product detail page leads to a significant increase in conversions.

Sasha Mattison Senior Front-end Developer and UX manager GUESS
Key Takeaway

Up your SEO game and boost customer experience in a mobile-first world by applying automated responsive design to optimize images and videos at scale.

Want to learn more? Get the Report

Chapter 6: Microbrowsers

Shine a Light on The Engagement Opportunities You Can’t See

The increase in mobile traffic leads us to another important trend: the growing importance of content shared in messaging app browsers, or microbrowsers

According to recent data from Spectrm, messaging apps have overtaken social media platforms in the number of active monthly users by 20%. This means the majority of content shared via mobile today is viewed on these so-called ‘dark social’ channels in the form of links pasted into emails, chat apps like WhatsApp and Messenger, and business collaboration tools like Slack.

The top instant messaging platform the brands in our study favor is iMessage. The service is the number one globally, except for in Southern Asia, Sub-Saharan Africa and Northern Africa, where WhatsApp leads. WhatsApp is the number-two service globally (in nine of 14 regions), followed by Facebook Messenger and Slack (in six regions each). Northern America is the only region where WhatsApp did not enter the top three.

iMessage maintains its number-one position across sectors, except for the Media industry where Facebook Messenger is mostly used to share images and videos (75%), and Computer & Electronics where Slack is ranked first (73%). This confirms the important role Facebook plays for news distribution. Slack is the number-two service across all industries and Snapchat ranks three.

And new dark social channels exploded during the pandemic, including secure systems like Signal, along with chat windows in video conferencing software like Zoom and Teams. Even though these channels started as communication platforms, they’ve mimicked browsers over time, effectively functioning as microbrowsers without the coding required for developing real browsers.

People shared content around the clock during the pandemic.
Click to toggle between data
Slack usage increase in the early mornings (6-7 am) and early evenings (5-7 pm) and on Saturdays

In our visual economy, it is important to address the unique needs of specific dark social channels. Why? Because each link shared within these microbrowsers “unfurl” differently, which means they create different previews based on the particular microbrowser. Brands can do a good amount of optimizing to tailor these images and videos to attract link clicks. The first step is to identify which microbrowsers are popular among a customer base and in a given industry, and then optimize (see Tips & Tricks) links accordingly. No keyword-search results, banner ads or newsletter will be trusted by a customer more than links shared by family, friends, and colleagues. Optimize those links accordingly, and a brand will shine through in the visual economy.

Microbrowser tips and tricks

Annotate Everything.

Upgrade the HTML markups on all your pages with microdata: titles, descriptions, images for links. Limit the title length to 10 words and descriptions to 240 characters each. And to avoid confusion, annotate only one favicon.

Add Open Graph tags.

As a protocol for expanding websites to facilitate content sharing among social channels, Open Graph promises to boost clickthrough rates.

Open Graph code snippet
								
								
<meta property="og:url" content="https://the-url.com/of/the/page"/> <meta property="og:title" content="A Page Title, Optimized for Microbrowsers"/> <meta property="og:description" content="A page description, optimized for microbrowsers"/> <meta property="og:image" content="/microbrowser-preview-image.jpg"/>

Post unfurl images.

Spotlight your content with a compelling image to entice the audience to seek more details. Assign the image a unique name to track the number of click throughs, which in turn will clue you in on the number of visitors the microbrowser impression has attracted.

Post nanostories or animated GIFs.

Microbrowsers like iMessage display nanostories, i.e., short videos of less than 720 pixels, and animated GIFs that showcase key selling points. Note: Only videos in MP4 format autoplay. By default, they are muted and looped so be sure to add subtitles to them.

Cater to all microbrowsers.

Microbrowsers render links differently from one another even though most would display your favicon. Familiarize yourself with the differences and ensure that your content satisfies the various requirements.

Ensure fast performance.

Latency issues exist for microbrowsers, which are not regular browsers. Post images and videos of a small footprint for efficient loading.

Automate generation and enrichment of images.

Automate the manual, mundane, and time-consuming tasks of managing rich media with software tools and digital asset management (DAM) systems.

Are you ready to make the experience as powerful as your vision?

Visual storytelling will always be a blend of art and science, a mix of creativity and technical innovations. Understanding how to harness the latter – to ensure your visual stories are displaying and connecting the way you intend – will enable you to deliver digital experiences that engage and inspire, around the world and on every platform and device.

Fill out the form to download the report.