This episode is part of the #CommerceTech series why I review digital asset management platform Cloudinary which helps digital teams automate the entire image lifecycle — from upload, storage and catalog management, to on-the-fly asset manipulation (cropping, resizing, filters) and high-performance delivery through global Content Delivery Networks.
WebP Image Format Specs
[Blog] 10 Mistakes In Handline Website Images and How To Solve Them
[Note: Transcript not edited for grammar and spelling]
Joshua Enders: [00:00:10] Hello everyone and welcome to the For Digital Leaders podcast this is where business leaders learn how to scale their organizations in the digital age. I'm your host Joshua Enders. And in this episode this is part of my #CommerceTech series this is where I review technology and how it can be used to deliver state of the art e-commerce experiences. The technology that we're going to review today is Cloudinary. Cloudinary is a best of breed digital asset management platform otherwise known as a DAM. And DAMS are not new. But they have been traditionally they've been used for file storage and collaboration between different team members and departments. But the next generation DAMs have grown to do much more than this on this episode. I'm going to explain what a DAM is and explain who uses it and the purpose that it serves in a digital commerce solution.
Joshua Enders: [00:01:10] So the web has evolved greatly as we all know and it's become more and more visual. And this is oftentimes review referred to in creative circles as the visual web. Ten years ago the content that we'd consume on the web was disproportionately text. So it was text heavy. But again as the web has evolved and bandwidth capacities have increased we've started to see and consume more and more images and video on the web. And these next generation DAMs they enable digital teams to store images, videos, files and other media assets in the cloud and be able to deliver those assets in a variety of ways to digital touch points in the most optimal way in order to achieve the best user experience. So asset management the technology Cloudinary it simplifies how we manage the assets and automating the the lifecycle from uploading the asset, storing it catalog and we'll talk about that later on in the podcast and the next generation DAM are also offering ways to programmatically interact with these assets so it's on the fly asset manipulation use cases such as cropping resizing facial recognition artificial intelligence has found its way into the DAM technology the application of filters and then also these DAMs support the high performance delivery of the assets across these global content delivery networks and this is important because it's another way to optimize the delivery and deliver those assets in a very fast way so they load very fast.
Joshua Enders: [00:03:06] When I advise companies on their e-commerce strategy the Digital Asset Management System this is an application type that we cover in-depth because it plays such an important role in a commerce architecture and DAM technology it's also very important because it's an enabler of important practices that you'll see deployed in an effective digital teams. And I'm specifically speaking about user experience optimization. So Cloudinary enables digital teams specifically designers and developers to follow these best practices and that's not available with some of the traditional legacy DAM technologies so we're going to touch on that in a bit as well.
Joshua Enders: [00:03:55] How we optimize images and videos and how they're delivered across a network to achieve fast load speed, this is also crucial to delivering a great user experience and again the next generation DAM technology like Cloudinary it makes it much much easier for designers and developers to follow these best practices.
Joshua Enders: [00:04:17] Who uses a DAM? Who are the users. Who is it designed for well. And there's a variety, there's multiple stakeholders. First our creatives. They use it to store and catalog content. We also have marketers use it and they're usually retrieving the assets in the DAM system to use the content in their campaigns. And then of course we have our developers our software engineers and they use the content stored in the DAMs in their applications for example an e-commerce website.
Joshua Enders: [00:04:50] DAM technology will deliver multiple key benefits to these different groups on a digital team. For the creatives for our designers and our photographers, the next generation DAM has an image manipulation capabilities and it's going to significantly reduce production time. And traditionally it's been the designers and the photographers they're responsible for creating and managing product images and they've had to create multiple variants of these images and videos for different viewport sizes, screen resolutions, dimensions across an e-commerce website. There's a lot of time and effort that it takes to create the different versions of images and videos for optimal display. But with Cloudinary all you have to do is upload a single high res image, and video as well. And then they can access the image and that video through an open API. You can just pass parameters through the query string and voila you can create multiple variants based on that base image or that base video with minimal effort so it can dramatically reduce production time for our creatives.
[00:06:13] For developers, it helps them as well because they're not dependent on the designer any longer to create the images that they need in their application. In a recent implementation that I worked on I would witnessed firsthand the back and forth between developers requesting from designers, hey I need you to resize this image. I need you to manipulate this image in this way but with Cloudinary the developer can do all that themselves programmatically. It's really cool how it works and it saves them a bunch of time and just eliminating that back and forth.
Joshua Enders: [00:06:53] So in my experience working with a variety of organizations in many sectors implementing e-commerce technology, building solutions most organizations will already have a solution for storing digital assets. And the e-commerce team are typically required to use these systems because they're already in place or because of some policy. And this is a prime example of when there is a legacy policy that needs to be re-examined and we need to determine if it's suitable and if it's either helping or hurting the digital team achieve their objectives. I strongly encourage digital leaders to push back on these policies that force digital teams to use older antiquated technologies and to advocate for using modern best of breed tools such as Cloudinary digital asset management offering. The newer technologies... they're developer friendly. They save time as we talked about. They bring multiple benefits that make a digital team more agile. They they do a much better job of delivering the digital asset over Internet networks. And just because there is a policy that's been in place or the status quo or this is how we've always done it, we still need to push back on those policies and those positions and do everything we can to adopt these modern tools because they're better, they are much better and they make for a better and more effective digital team. So the leadership imperative here is to be a champion for re-examining policies that are getting in the way of delivering great user experiences.
Joshua Enders: [00:08:57] OK so let's examine some of the capabilities of Cloudinary that are part of its proposition for e-commerce teams and beyond. Not just e-commerce teams use these digital asset management systems. The foundation of it all is asset storage and as one would expect. So Cloudinary is used to store digital assets. It's a database and it allows for secure storage of video, images, files and it comes with automated backups, a revision history, and disaster recovery. And all the media assets that are stored in Cloudinary can be browsed and managed using an open API or they also offer a web based interface that's very powerful. As a non-technical user, when I use Cloudinary I'm accessing the assets through the web UI.
Joshua Enders: [00:09:56] For e-commerce teams, most times if not always the best of breed DAM it's going to be a superior option for asset storage compared to the commerce platform. For example, Cloudinary has official integrations with both Magento and Salesforce Commerce Cloud. And the platform vendors like Salesforce, Magento they'll partner with DAM technology providers because those technologies again are just going to offer better capabilities than the platform. And for any organization or team or even a systems integrator that's worked with Salesforce you know it's well known that storing assets on the Salesforce platform is not optimal in terms of delivering the best experience. Cloudinary offers a great alternative to that. And I think they're, I believe their partnership with Salesforce is fairly new. I think they announced it in August 2018. So the technology is new and it's showing that Salesforce is recognizing that in order to deliver first class e-commerce experience, part of the solution needs to be off platform.
[00:11:11] Cloudinary also offers asset upload tools so it provides developers with technologies that make it super easy to upload images and videos directly to the cloud from a browser. There's an interface and you can embed directly into your application without having to build and maintain any infrastructure. So again just make it really easy to upload the asset. So why I'm pointing this feature out is because it enables an important e-commerce feature called user generated product images. And e-commerce usability research firm Baymard Institute shows that in their research 36 percent of test subjects relied on user generated product images to further explore products. And we're starting to see this more and more on sites especially those that sell apparel. And Instagram has made it easy to implement this feature for users to upload a photo and then by hash tagging it, e-commerce site will index it and display it. It's a bit of a hack. It's not perfect and it puts the burden on the user to hashtag correctly. Brands that want greater control over user generated product images Cloudinary is a great fit and a good implementation example is Rent the Runway (www.renttherunway.com). It's where women can rent apparel for a limited time versus paying full price and buying the item. And Rent the Runway shows user generated images of customers wearing the item out in the wild. And I think it does a great job of giving the customer that added perspective of seeing the item on an actual person. Rent the Runway they only show unfiltered versions of the photos, so they're not doctored versions or images created by a PR firm. They're just raw out there in the wild. Actual photos of actual people wearing the product.
Joshua Enders: [00:13:51] Next is asset delivery. And here's where I think Cloudinary stands out. Really powerful stuff. High value features like dynamic image formats. I actually learned something here in my research I wasn't aware of. Image formats can have a significant effect on load times, but manually determining the optimal format and the encoder settings for every image is just inefficient. So the ability to do that programmatically is ideal and Cloudinary is able to do that it can dynamically determine what is the most efficient, the best image format to use based on the browser. I think it's able to detect called browser hints and what this means for the developer is that you can automatically deliver images as the WebP format to Chrome and as the JPEG-XR for Internet Explorer. Here's what I was referring to when I say I learn something in my research I wasn't aware of these image formats and that have optimal uses based on the browser. Cloudinary can also detect when the PNG format is best suited. But going back to this WebP format what I found interesting is that WebP format can have a 25 percent file size reduction compared to PNG and in most scenarios. That really struck me because that's a significant file size savings and Cloudinary can detect when to use that image format and save that much file size. That's actually pretty significant. So anyway I thought it was worth noting. Why this is important because reduced file size means faster delivery means better user experience and that's essential. That's what we're aiming for here.
Joshua Enders: [00:15:49] Next, Cloudinary offers some on the fly image manipulation capabilities and this is useful for creating multiple variants and delivering them with high performance across the global content delivery networks that Cloudinary offers. Some examples of image manipulation is cropping, scaling based on viewport resolution, and dimensions. Applying filters using artificial intelligence for facial recognition. It also has this native celebrity facial recognition feature so it knows if you're using an image of a celebrity. Anyway it's very powerful what it can do. And again it saves production time because our creatives only have to upload one single image and Cloudinary will do the rest to ensure that that image is displayed and deliver in the most optimal way.
Joshua Enders: [00:16:46] Some of the use cases of the image manipulation features... one is responsive images and this is very relevant for e-commerce teams. So with responsive images we want to display different image sizes and resolutions depending on the viewport. And if you use CSS to do this you display that image as a background image and you have a few attributes that you can apply that determine the focal area and how it looks when it scales down. But in the end it's still the same image and as you reduce the viewport size you're unnecessarily using heavy images. Cloudinary has native capabilities to instead of creating different images you just upload a single high res image and Cloudinary is going to optimize the right fit based on the viewport and the layout... significant time savings here. Again it eliminates that back and forth between developers and designers.
Joshua Enders: [00:17:53] Also image specific breakpoints so this is like the opposite of that which says instead of using a single image and resizing it based on the viewport, programmatically create multiple images that are of different sizes and file size. Traditionally a designer would have to do this in Photoshop or similar tool and they would have to go through a resize and save scenario. But Cloudinary does it all programmatically. It literally can take one image and then you provide some inputs and it's going to create multiple images at different sizes, different file weights... and it knows when to display each image as the viewport is adjusted to be smaller and larger. Really amazing how it all works.
Joshua Enders: [00:18:48] I provide some tools and resources on my web site at the end of the transcript of this podcast and one of them has a link to an online image breakpoint generator. Take a look at it's really cool how it works.
Joshua Enders: [00:19:03] Next is video streaming. So Cloudinary offers a what they call adaptive video streaming. And this is going to automatically adjust the bitrate and the resolution of your video in real time to best match the player dimensions, the bandwidth that's available, and the CPU capacity of each viewer. So it does all that dynamically and why this is powerful because it ensures that our videos are optimized for playback at the device level. And this is going to ensure that we deliver a great video experience to our users because you can't miss on your video playback. You have to get it right for your user is off to another destination. So this adaptive video streaming has very powerful capability and this is what we want to use for our product videos. These are the videos that we display on the product details page which are essential to the decision making process that customers make when they determine if they want to add the item into a cart and if they ultimately want to purchase. So how we optimize video playback is crucial.
[00:20:16] Next Cloudinary provides us with a customizable video player. It offers a event tracking this is really cool feature which captures information about how your viewers are engaging with your video. It then passes this data to your analytics program like Google Analytics where you can do deeper analysis. It gives the brand powerful features to give us full control over the user experience. One it's gathering that analytics data so we can optimize going forward but also how the customer views and engages with the video right there and our e-commerce site. Some examples of this are being able to create playlists. So it gives you the ability to programmatically create playlists and also control the recommended content. You can't do this on YouTube. The recommended content is determined by YouTube based on their algorithm. But Cloudinary allows you to very easily create your own algorithm to control what content that you're recommending and that way it stays on point and on brand.
Joshua Enders: [00:21:28] OK so there you have it. That's my #CommerceTech review of Cloudinary. I love the Cloudinary product. I've used it for many years for a variety of purposes. We use it for demos, we use it in some of our R&D projects. We advocate for it with our clients as well. We think it's a DAM they should consider. You can sign up for a limited use account for free at www.cloudinary.com and give it a test drive. I recommend doing that and another quick fact about their company that I thought was really cool is that they bootstrapped their startup for the first four years and they focused strictly on the developer end user. They've grown beyond that you know they've grown tremendously and they've since partnered with Bessemer as a strategic investment partner so they have taken on money but they didn't do that in the beginning and so it's kind of the anti Silicon Valley example. There are examples like this, but I just love the story of the bootstrap startup that fought their way and built a profitable company from day one. Rather than being paper rich and bragging about their valuation as they go off and raise millions of dollars. I think it is a great story.
Joshua Enders: [00:22:46] I really enjoyed bringing this information to you. And again you can read a full transcript of the episode on my website along with some helpful resources about DAMs, responsive break points, image formats all kinds of great stuff and you can read it at www.joshuaenders.com/fordigitalleaders/cloudinary.
Joshua Enders: [00:23:00] OK. Until next time take care.