Cloudinary DAM
I was lucky enough recently to implement Cloudinary as a DAM solution on a project. A DAM being short for a digital asset manager. This is a type of cloud service typically used in the media and entertainment sectors. They’ve been around for decades but SaaS solutions have opened up, offering these services to the wider website consumer market. This enables sites running on Wordpress or Mageneto (or any CMS) to pick up an off the shelf solution. There are real SEO and User Engagement benefits to integrating one into your asset pipeline. Lets dig in to what Cloudinary has to offer and why this can help a website.
DAM (Digital Asset Manager)
A digital asset manager is better thought of as an engine rather than cold storage like S3/Cloudfront. A DAM can take input as media files; Images, videos, audio or even 3D files are the types of input one would expect. The DAM then offers all things related to the life cycle of assets. One of these functions allows editing and optimizing media on the fly for the targeted delivery device.
- Converting RAW or Photoshop documents to optimized assets at run time.
- Image OCR or text extraction.
- Object detection and AI cropping around points of interest.
- AI image tagging.
- Automatic background removal.
- Video transcription.
- Content moderation by detecting graphic or illicit content.
- Virus scanning.
Traditional Media Lifecycle Example
This is a contrived example but very similar to workflows in digital agencies. When building out a new app or section of a website the designer kicks off the flow by search a storage system like Dropbox (or Google Drive). Assets are downloaded and individually edited in a tool like Photoshop. These assets are then sent to a developer where the images are slotted into the site. If an asset is missing or a change request comes through this workflow reinitializes. Not only is there a lot of manual work, but not all designers are great at providing optimized images.
A workflow using a DAM
When using a DAM we can programmatically express the image. Along the lines of “I want 200px wide image, cropped like a thumbnail, orientated around faces”. Now any image requested by the DAM for that particular image expression will conform.
Not only does this save time. But it also offers a non destructive life cycle of assets. Its not uncommon for the website assets to become the source of truth over the years. But when we save out assets for the web we compress them as much as possible to speed up loading for the user. This limits their ability to printed or repurposed else where.
With Cloudinary we can save Photoshop documents and serve jpgs to a user. We can also support RAW images (.cr2, .cr3) which are a type of file used by photographers that store more color information than whats renderable to a computer screen. This is amazing for print where have a deeper range of colors available.
Further to this Cloudinary automatically detects the best format for the device making the request. This saves on bandwidth costs as a host and further decreases load times for the user. This can be applied to images or videos. Doing this yourself is a nightmare as you have to pick the best image or video formats. Then use source switching to attempt the loading of an optimized asset with a small file size footprint, falling back to older formats if that fails. Having this done on request reduces implementation to zero effort as the consumer. It also means if a new format becomes available Cloudinary is responsible for detecting and converting to this format.
First in class compression
For years I have used Photoshop to export a compressed asset. More recently for small batches of images, TinyJPG or TinyPNG was easy to use and out performed Photoshop (in my use cases). I was surprised that Cloudinary was able to further enhance this compression. And this is without the previously mentioned auto formatting which further saves file size. This is just jpg to jpg or png to png conversion.
Left: original Right: compressed
SEO & User Engagement
Web Vitals were announced by Google May 2020 and went live May 2021. These are performance metrics that Google measures affecting your site SEO. One of these is LCP (largest contentful paint), this measures the most costly thing to render thats within view. This is typically a hero image or video. This is particularly meaningful on news or e-commerce websites where media plays a vital role in content.
With LCP these are the primary factors that influence this metric.
- Slow server response times
- Render-blocking JavaScript and CSS
- Resource load times
- Client-side rendering
Of these points 1 and 3 are two areas where Cloudinary boosts the performance of this LCP metric.
Additionally to LCP user engagement and bounce rate are similarly affected. The longer it takes to deliver content to your website user the higher chance of them bouncing or leaving your website.
Overall
If delivering media to your users is critical to your website or application Cloudinary is worth investigating. The team are friendly bunch of people to deal with and their services offers real value in this delivery department.