The next decade of visual media

Much has changed over the last decade. Every single industry has undergone a fundamental transformation. From retail and health care, travel and entertainment, media and publishing, the way we find, consume and share content, research and purchase products has changed dramatically.

As the online world becomes infinitely more vast, consumers are showing preferences for a return to a back to basics, expecting brands to know us much like our local shopkeepers do. Our preferences, our needs, our desires.

So how can brands balance the two? Connecting with consumers who have an increased appetite for richer, more personalized content that speaks to them, but a decreased and shrinking attention span. How can companies deliver a fully digital and modern experience, while holding onto and improving those “old fashioned” connections we all long for as connected customers?

Enter the visual economy

Today’s digital economy is a visual one — where beautiful, visual-centric experiences engage and convert. A world where an experience without visuals is often a missed connection. A failure to deliver the visual cues and connections that today’s consumers want — and have come to expect — results in disappointment at best, and abandoned carts and lost loyalty at worst.

Cloudinary and its customers are at the center of this new era. Images and videos are no longer just important elements of the story — they ARE the story. Delivering visual-first experiences that connect, engage and convert is no longer a hope or a goal. It must be the reality. Those living it, and taking full advantage of all the visual economy has to offer, will win.

Takeaway #1 Microbrowsers

By creating compelling, informative links with images, video and text information specifically for microbrowsers, you increase the likelihood that peer-to-peer recommendations convert into clicks and sales.
These link previews provide huge engagement opportunities yet many brands often overlook how their site design might be impacting the generated preview.

Small screens, big impact. Make the most of your microbrowser content.

You’ve seen them everywhere. That little thumbnail preview of a website mentioned in a tweet, the expanded description in a Slack channel, or in a WhatsApp group chat. These link previews provide huge engagement opportunities yet many brands often forget to consider how their site design might be impacting the generated preview. While platforms like iMessage work hard to surface data to present your microbrowser, not all systems do the same. Brands should be working to ensure that an optimal visual experience is displayed across all chat and messaging apps, as well as the long tail of other screens like handheld game devices and smart appliances.

By creating compelling, informative links with images, video and text information specifically for microbrowsers, you increase the likelihood that peer-to-peer recommendations in groups convert into sales and reads.

Dynamic experiences, everywhere.

Brands must ensure a consistent and engaging experience no matter which messaging apps their audiences use — and no matter where they are in the world. Just as marketers understand the power of localized, personalized content, developers must work to ensure that experiences within messaging apps are optimized no matter how and where the content is viewed. What’s more, understanding that small but very popular applications, like Viber, which is popular in Russia and other Eastern European countries, play a big role in driving vitally important engagement and peer-referrals. Brands that get this right won’t miss big communication and experience opportunities.

Pro Tip

Ensure that your links are unfurling within microbrowsers.

  1. Annotate everything throughout your HTML-markup. For best results, limit your title to 10 words and your description to 240 characters.
  2. Always use Open Graph as markup – different microbrowsers’ fetch links from your site in different ways. Since you don’t know who is visiting, we recommend using Open Graph.
  3. Select a specific unfurl image – ideally not the ‘hero image’, but one that compels the recipient to want to find out more information. Give the image file a unique name so that you can count how often it has been fetched.
  4. Use short video ‘nanostories’ or animated GIFs for the few microbrowsers that currently display video.

Unlocking hidden engagement opportunities.

In addition to offering important engagement opportunities, microbrowsers can provide us with helpful insights into audience patterns and preferences. Like the world we live in, user engagement patterns are always in flux. These insights can offer an important lens to help fine tune our messaging and content. Here, we’re using food as an example to illustrate different user engagement patterns — food-related content viewed in the last quarter of 2019 compared to food-related content viewed during the month of April 2020 and the height of COVID-19 lockdown. We can’t know for sure, but we can hypothesize that the lockdown shifted user behavior and how they engaged with certain brands; perhaps dinners are happening later in the day and or perhaps audiences are planning ahead?

Glossary

Favicon

A file containing one or more small icons associated with a particular website or web page.

Microbrowser

Those miniature previews of web pages inside private message discussions like Slack, WhatsApp and WeChat.

Microdata

An HTML specification used to nest metadata (information about data) within existing content on web pages.

Nanostory

A very short video that demonstrates the unique selling points of a product or service in action.

Unfurled Links

Previews of web pages inside private message discussions in microbrowsers that create your brand’s first impression and play a big role in whether or not the person on the receiving end will click through to buy, or read or engage.

Web Annotation

With a web annotation system, a user can add, modify or remove information from a Web resource without modifying the resource itself.

View All TakeawaysView All Takeaways

Takeaway #2 Social & Advertising

A significant portion of a brand’s traffic reported as Facebook is actually coming from a peer referral — a shared link from a Facebook page.
With so many different mobile devices and laptops, there are a staggering number of image and video viewing formats to accommodate. Adding to the complexity, different social networking channels favor specific formats.

Mining the marketing gold you can’t see.

The so-called ‘dark social’ percentage of direct traffic flowing from microbrowsers to brands websites is growing and highly valuable. This trend is amplified during the Covid-19 lockdown as growing numbers of people rely on messaging apps for private group and family discussions. A portion of the traffic your reporting analytics leads you to think is coming from Facebook, is actually coming from a peer referral — a shared link from a Facebook page.

With more than 2 billion users worldwide as of mid-February 2020, WhatsApp continues to lead the growing pack of popular social communication apps that includes Facebook Messenger, WeChat, Viber and QQ.
WhatsApp

Turning a light on “dark social.”

The data is from a very popular apparel brand’s Facebook campaign and offers a view into the power that microbrowsers and peer referrals have. Marketers understand that private shares and group chats within microbrowsers amplify content greatly. Here we can see that while nearly 64% of those links shared within microbrowsers have their campaign IDs intact, the other 36% don’t. Because users are sharing the link from your campaigns, that campaign is credited with the referral traffic. It’s not wrong to give Facebook a lot of the credit here, but there are missed opportunities in not understanding the bigger picture — and the power of referrals. Understanding microbrowser traffic and its relationship to social media can help correlate where your conversions are really coming from — and as a result boost or reduce spend accordingly to see a better ROI.

Pro Tip

Boost your referral engagement with visuals.

Dramatically amplify the performance of peer referrals across devices. Go beyond the link and include a compelling image or video.

Glossary

Dark Social

Dark social media, dark social, or dark traffic, are social shares that do not contain any digital referral information about the source.

Long Tail

A long tail is the part of a distribution curve that consists of many different types of items in small quantities. By contrast, the “head” or central part of the distribution curve consists of a few types of items in large quantities.

Microbrowsers

The miniature previews of your site that proliferate inside discussions in private messaging apps like Slack and WhatsApp.

View All TakeawaysView All Takeaways

Takeaway #3 The Power of (Micro) Video

Micro-video content is typically just 10-20 seconds long but delivers big engagement and conversion gains.
Take advantage of the information in your headline area. If the video is your movie, the headline is your trailer.

The impact of video cannot be overstated.

The art and science of making video work in a consistent way across a wide range of laptops, mobile devices, web browsers and social channels is both complicated and laborious. It can entail a wide range of coding, visual artistry, communications, and even legal knowledge. Many of the tasks involved are detailed, repetitive and tedious. Fortunately, these are ideally suited for AI, and there are tools available to relieve developers and creative teams of this burden.

Be responsive and tell the story you aim to tell.

Today, all content, and perhaps especially video needs to adjust for portrait and landscape. It’s not either, it’s both. In order for a video to be responsive, the video should always expand to fill the width of its screen while maintaining its original aspect ratio. The goal is always to avoid static sizing that can break page layouts, distort the image, or display black bars around the video.

When used for marketing, one minute of video is equivalent to 1.8 million words.
Forrester

The most powerful video opportunity you might be missing.

Not all video experiences are the same and understanding differences in video content is key to delivering optimal engagement and experiences. For example, longform video like a movie or TV program can vary in quality depending on the situation. On the other hand, micro-video content must be of the highest quality the entire time, every time, especially when used by e-Commerce brands to highlight a specific product or product feature. You have just a few seconds to get it right or miss a big opportunity altogether.

Pro Tip

Small adjustments, big impact.

  1. Cropping – make sure that the most important elements in a video remain visible in the viewing area no matter where users are consuming the content — PCs, tablets or smartphones.
  2. Subtitles – most people view YouTube videos with the sound on, but less so on social media sites and websites. In fact, a surprising 85 percent of videos are played with no sound.

Use Case

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. The company was seeking a way to further enhance its content offerings by delivering short video highlights while games were still in progress. Bleacher Report is able to automatically transcode videos into a streamable format, adjust their quality and resolution, implement adaptive bitrate streaming and deliver them through a fast, reliable content delivery network.

Bleacher Report

Increase in total video views by 25% per month

Immediate increase in video views of 350%

View All TakeawaysView All Takeaways

Takeaway #4 Going, Going Global

Personalize images and videos with dynamic text overlays for content localization.
An optimal balance between resolution and quality is critical for an uninterrupted streaming experience no matter where audiences are engaging.

Optimize across timelines, cultures and platforms.

The Internet is a diverse, multifaceted universe — and this is also true when it comes to how and with which devices people surf it. And while the big players such as Chrome and Safari dominate the landscape, there exists a huge browser long tail with significant regional differences.

The browser long tail doesn’t need to compromise visual storytelling.

While Chrome and Safari continue to dominate the worldwide browser market (63.91% and 18.2% respectively), there are significant regional differences across lesser known variants. For example, our research shows that Nokia devices are still popular in some regions like Northern Europe and that Nintendo DS systems see a lot of traffic in certain Asian markets. There’s even image traffic coming from the very old legacy office software, Lotus Notes.

The varied device landscape and its impact on mobile engagement.

Devices today have a longer life cycle and have become “less disposable” thanks in large part to improved batteries. And as users hold onto their old phones longer, the variety of devices within the mobile ecosystem is more complex than ever. Employing responsive web techniques is critically important to ensure an optimal experience on every device.

There is no such thing as “mobile versus desktop” anymore.

On your way to work you check your WhatsApp messages on your mobile. A friend shared a link with you to a Facebook post that promotes a type of bag she knows you have been looking for. You do a bit more research on the bag during your commute to work. At lunch you do more research on your desktop computer. When you get home, you show the bag to your roommate on your iPad. You also found a nice product video that showcases a lot of the bag’s details, fabric and texture. Later, you take another look at the bag on your laptop, which has a bigger screen and better resolution. Finally, you decide to pull the trigger and buy the bag. You send your friend a WhatsApp message letting her know.

How progressive is your web design?

While the need for responsive layouts is critical, developers for global brands must also be adaptive for location to ensure their content is optimal no matter where it’s being viewed. Since such a high volume of cellular traffic comes from laptops, it’s also important for web developers to apply progressive enhancement — a design strategy that emphasizes core webpage content first. This strategy allows additional layers of presentation and features on top of the content as the end-user’s browser and Internet connection will allow.

Pro Tip

Ensure a seamless user experience, anywhere and always.

  1. Understand and prepare for the browser long tail. This is important as not all browsers support every image or video format you might use.
  2. Make your images and videos responsive. Making sure your images and videos are responsive is more than just adjusting for the right layout. It is now, more than ever, about making sure that your content is making maximal use of landscape and portrait device orientations. A site designed responsively adapts its layout to the viewing environment, resizing and moving elements dynamically based on the properties of the browser or device the site is displayed on.

What “Save-Data” (or lite mode) means for you and your users.

In April of 2020, 18% of global Android users enabled the Save-Data or lite mode function. Knowing this, developers can adapt visual content to ensure the experience will be optimal without losing performance. According to our data, web developers that work to optimize the lite mode experience benefit from longer engagement and see up to a 10% uptick in session engagement. Given the strong correlation between adapted content and longer engagement, why not ensure your content is adapted for this mode and its users?

View All TakeawaysView All Takeaways

Takeaway #5 Next-gen formats. What’s next for the Visual Web?

PNG remains one of the most versatile formats on the web. PNG files are able to handle up to 16 million colors, compared to the 256 colors supported by GIF.
Newer formats deliver efficiencies and storage savings, and platform support and adoption is growing.

High-performance formats are reaching the tipping point.

Since the early days of the Internet, image formats such as JPEG, GIF and a little later PNG and SVG have prevailed. In recent years, light, high-performance formats such as Google’s WebP and the High Efficiency Image File Format (HEIF) have emerged, which are better optimized for today’s digital experiences. Others like AV1 Image File Format (AVIF) and JPEG XL are still in gestation.

Next generation formats are landing in consumer devices

Optimal experiences require a multidimensional approach.

Image formats have come a long way. While the majority of your customers and prospects still rely on popular browsers and devices, the long tail does exist. Developers can do a lot to improve user experience by thinking about and formatting for experiences that extend well beyond what’s most popular — and building for what’s best.

Developing the ‘Next’ JPEG
These are exciting times for those of us involved in the world of standards and image formats, and especially for those of us directly involved in the development of what will hopefully soon be a major update — the first in almost 30 years — to the legendary JPEG format.
Dr. Jon Sneyers,
Senior Image Researcher at Cloudinary, Co-creator of JPEG XL and inventor of the Free Lossless Image Format (FLIF)

Pro Tip

The new kids on the block

  1. WebP – employs both lossy and lossless compression. Released in 2010 by Google, it is a lightweight format that essentially tries to make images smaller. WebP enables transparency and can be animated. It is more about achieving faster image load times than higher image quality. However, it has a website use rate of less than one percent and is mainly limited to Chrome and Android-native applications.
  2. HEIF – was developed in 2015 by the Moving Picture Experts Group (MPEG). It is about 30-40 percent smaller than traditional JPEG. The quality of the original file is always conserved because edits are stored separately within the same file. It lets you create 3D-like images or ‘cinemagraph’ style moving images, creating an immersive, contextual experience. HEIF can store an extended range of color values. Apple OS11 and post devices support HEIF, but they comprise only one segment of devices and browser versions.

Glossary

Image Compression

Used to make a file less heavy and thus load faster.

Lossy Compression

All image components are preserved but unnecessary pixels removed. This results in a compact file size, but with every saved version you lose more detail.

Lossless Compression

Allows the original data to be perfectly reconstructed from the compressed data. The resulting file size is large, but detailed.

Vector Graphics

Uses points, lines, curves, or polygons to model an image.

Raster Graphics (bitmap)

Models images as a collection of pixels.

Device Pixel Ratio (DPR)

Refers to the ratio between the pixels of an image and actual physical pixels on a screen. For an image to be displayed correctly, it needs to match the DPR settings of the device.

View All TakeawaysView All Takeaways

Takeaway #6 Measuring for Success

Understanding the timing and cadence of when users are interacting with your images and videos are key to real insights.
Social plays such a big role in brand and user engagement, but does your data miss hidden interaction opportunities?

Remove measurement blindspots.

Remember when a customer’s purchase decision could be easily traced back to a single point of contact? Those were the good old days.

Digital has turned the business of marketing on its head. Fragmented and sometimes hidden purchase paths have made measurement a dizzying — and seemingly impossible — errand for brands, marketers and agencies alike. But with worldwide marketing spend exceeding $1.6 trillion in 2019 (source: GroupM), it’s an expensive errand to get wrong. All too often brands are making investments based on perceptions versus reality. Executing campaigns without an accurate understanding of what’s working and what’s not is costing brands hundreds of thousands of dollars — if not millions — each year.

The good news is that within every great challenge is an enormous opportunity to get it right. To build winning campaigns that connect and convert, and to let go of the ones that aren’t. Here are a few considerations that can help marketers build the tech infrastructure required to create and deliver modem campaigns, remove measurement blindspots — and in the end, work smarter not harder.

One size does not fit all.

Most brands understand successful global campaigns require global thinking, but many do not go far enough to understand the impact cultural differences have on engagement. Beyond time zone differences, workweeks vary all over the world. While most follow a Monday through Friday workweek, more than a dozen countries have a Sunday through Thursday workweek, and more than seven countries have a one-day weekend versus two. Understanding these differences and the cultural nuances that impact engagement levels and patterns, are critical considerations when planning global campaigns.

Pro Tip

Winning the analytics battle

  1. Improve alignment between marketing and IT. Marketers often deploy the tools they think they need, while developers tend to identify and deploy what they need. This leaves companies with several point solutions that fall short of a cohesive technology stack that works across the whole organization.
  2. Build for the future, today. The need to meet goals quickly can lead marketers to adopt seemingly simple, low-cost systems. For media management, for example, marketers can use Dropbox, Google Drive and Excel. Those tools might do the job just fine – for a while. But they likely will not be able to meet the needs of a company as it grows, forcing marketers to reassess, make adjustments and, often, start over.
  3. Omnichannel has evolved to Optichannel. With the explosion of new digital touchpoints over the last decade, the focus was to reach as many as possible. As the landscape has evolved, brands have come to understand that it’s far more valuable to focus on the right message, for the right audience, on the right channel or channels, at the right time.
View All TakeawaysView All Takeaways