Cloudinary Blog

Manage thousands of images with multiple versions across all of your web properties

Improve user experience with responsive websites and applications
This article originally appeared on Inc. Magazine and is reprinted with permission.

Back in the day, responsive website design wasn't the business imperative that it is now. In fact, just having a functioning website was all that it took to set you apart, and if it had images that loaded correctly within a few minutes, then that was a nice bonus. Needless to say, but I'll say it anyway, those days are long gone.
 
These days, dynamic image management, or having images that load quickly at the optimal resolution with the appropriate dimensions and art direction for every device upon which they're viewed isn't a luxury--it's a necessity for optimal customer experience.
 
I had the chance to sit down with Itai Lahan, the CEO and co-founder of Cloudinary, at a recent tech conference and asked him about their image management platform.
 
"Image optimization is both an art and a science, requiring a delicate balance between device resolution, image dimensions, viewing quality and image optimization. The challenge is finding the right mix, serving the highest quality image a device can handle while minimizing the impact on site performance and user experience." - Itai Lahan, CEO Cloudinary
 
As the curator and creator of the Inc. Magazine's Tech Tools for Entrepreneurs, I wanted to go out on a different limb and talk about a tech solution that many developers and most marketers haven't taken into consideration, dynamic image management.
 
Have you ever been to a site on your mobile device where it was clearly optimized for the web, and you can barely see the image, even though the mobile site is responsive? This is where programmatic image optimization can solve that problem.

Enter Dynamic Image Management

The challenge for modern marketers and developers is to create websites that don't just tell a story, but that are also responsive to the technology used to view them. Each device and browser have its own specifications for displaying website content including images.
 
This means that you will almost always need to have different versions of each of your images available at different breakpoints to facilitate a smooth, comfortable, and engaging user experience.
 
Managing potentially thousands of images that each have multiple versions across all of your company's web properties can be a daunting, time-consuming, and expensive proposition. This is obviously an area of serious concern for marketing technologists and web developers.
Dynamic image management assets
 
Fortunately, there are steps you can take to simplify this process immensely to save you time, money, and valuable IT resources while still having compelling images where you need them on your site.

Responsive website design to facilitate conversions

As I mentioned in a previous Inc. article, for every hundred customers who visit a website, nearly 68 of them move on before making a purchase due to a variety of factors. One of those is undoubtedly user experience. The longer it takes for your website to load, or the more distorted the images on it appear, the more likely users are to move on without converting.
 
This is especially relevant due to the fact that human attention spans are at an all-time low of just around 8 seconds, and typically a person leaves a website after about 10-20 seconds. That doesn't leave a lot of time for you to hook your website's viewers with a compelling narrative, let alone guide them down the path to a conversion.
 
My digital strategy agency was looking for a solution for a client and we stumbled upon the digital asset management software platform, Cloudinary, which allows you to handle these issues effectively and efficiently. It works extremely well in solving our client's image management issue.

Here's how it works:

Dynamic image compression

One might naturally assume that it's best to use the largest files so that images appear at the highest resolution across all platforms. However, this can result in excessive loading times and unnecessarily stretched bandwidth. Ensuring that images are optimally compressed for each platform automatically can help you avoid this problem.

Automated image resizing

Not all viewports are of equal size, and so images need to scale up and down depending on how much physical space the user has to view them. This means that it's crucial to be able to adjust image height and width instantly depending on the size of the viewport. Otherwise, you could make your viewers squint a bit too much, or conversely make them stare at a tiny section of the image while they lose sight of the bigger picture, literally.
 
This is important, particularly with the growing usage and increased variety of mobile devices, which commonly have high pixel density, but suffer from unreliable connectivity and monthly bandwidth limitations.

Content-aware art direction

Sometimes the browser or device needs a little help knowing exactly what part of the image to centralize on when it's being displayed. Using a dynamic image management system to tell the browser where to focus will allow your users to see the most important part of an image first. After all, it's practically common sense that a picture of a person needs to center on that person's face without chopping his or her head off, figuratively.
 
"The right sized image on the device, that your customer is using at that time, makes for a much better customer experience." - Chris Pulley, president of CCP.Digital 

Using a dynamic image management system optimizes user experience

Dynamic image management reduces load times and increases website conversions. It's also convenient because it allows you to upload one high-resolution image which is then automatically adapted to any device where it might be viewed. This way, you know that browsers will always center on the most important part of the image, select the optimal quality and size, and deliver it in any resolution or pixel density.

As a result, you'll have a responsive website that's fully adaptable to the needs of your audience every time. The experience will be better for the customer, and you could see much higher conversions as a result.

 

Travis Wright is a venture catalyst, keynote speaker, CMTO, marketing technology entrepreneur, data and analytics geek, tech journalist, startup growth hacker, standup comic, and a former digital marketing strategist at Symantec. Over the past 15 years, Wright has optimized and strategized marketing for hundreds of B2B and B2C business websites, from startups and midsize businesses to Fortune 500 companies.@teedubya

 

Recent Blog Posts

Cloudinary Product Gallery Enables Dynamic Buyer Experience

We live in a world where we spend increasingly more time online. As our routines change and adapt to new trends and technologies, we perform more and more of our daily activities in virtual environments. A key example of this is shopping. There are many reasons why online shopping has become so attractive for many buyers. A near endless variety of products is accessible from the palm of your hand. Customer reviews give buyers more confidence in their decisions. It's increasingly easy to search for attractive prices. And the list goes on. But a customer's desire to "touch" or "feel" the product is an interactive experience that can be hard to overcome when shopping online.

Read more
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