It is obvious that we are living in the era of visual communication. We are all used to scroll endless lists of content, competing by our attention. Images and videos have a big impact on our emotions and perceptions, and can really make the difference when customers are buying our products, services… or brands.
Still, integrating images in a CMS or e-commerce platform is quite a hassle, and resisted so far to all the technological improvements that other integrations went through. In a classic scenario images are handled as following:
- Images are created in hi-res, and stored somewhere with an arbitrary naming convention. These conventions get more complicated if we manage more views for the same product, or even 360°s. The big files must then be processed in batch, and resized to different sizes: product list, thumbnail, product detail, and so on, depending on the design. And maybe contoured for transparency.
- Even more images have to be generated if you have a responsive layout, either batch or by our frontend application. If you want to automate image processing you have to make compromises:
- choose an "average" compression factor to avoid creating artifacts, but keeping the image size contained;
- choose a format that could work for all browsers, renouncing to better but less standard options;
- apply a fixed cropping, if image formats are different, hoping that you are not cutting parts of the content.
- If you want good results on mobile phones, all images will exists in two resolutions, "normal" and "retina", creating complications on the number of files to be processed and file name convention.
- All those files need to be transferred to your e-commerce system, probably with a file-based integration like sftp / rsync. The products need to be updated with the links to the images, via batch job or similar. The alternative is to hardcode in the e-commerce the same naming rules that are applied when creating the files.
- If an image linked by a product is somehow broken (maybe because of the schedule of the process above, or due to an issue in file transfer) there is no way to verify it with a report or display a "default" image, if not using very time-consuming access to the file system in your code.
- New complicate rules have to be implemented in the frontend, to decide i.e. if to display a normal or retina version of the image, or its format (rectangle on a desktop and square on a mobile device).
- Further logic has to be hardcoded in the templates to add "stamps" like "Sale" or "New", often involving batch jobs. PageCache sizes increase exponentially for every combination of page/URL and possible image format. If you run on premises, a big part of your bandwidth will be consumed by transferring images.
Maybe you are one of the chosen people to whom all these processes are straight forward , you have an amazing digital department or implementation partner. Still, they are all "moving parts" that can break down, or are very vulnerable to human errors.
Would you like to embed videos? Think of all conversion and infrastructure issues, and multiply them by a tenfold.
Alternatively you may want to use a Digital Asset Management tool.
One of our technology partners here at Intershop is Cloudinary, a cloud-based solution for image and video management and digital asset management (DAM). It harnesses AI-based technologies to remove traditional media management pain-points, allowing brands to focus on delivering optimal digital experiences faster, no matter where their customers are engaging.
What is it about?
In short, the acquired hi-res images or videos are uploaded directly to Cloudinary Cloud-based solution, using the native web interface or integrating web-widgets in any software you use. And then… well, that's basically it!
There are no problems of bandwidth, cache, or disk storage, because everything is handled by Cloudinary.
The asset can be tagged with an ID (i.e the SKU): the only thing that the frontend needs to do is to link to a URL containing this ID tag and a shorthand on the context the image is used, i.e. "productDetail", "thumbnail", others.
Cloudinary will automatically deliver the image with optimal size and format for the device, preserving quality and loading time.
Would you like to know how much bandwidth is saved to the user? Feel free to test your site at https://webspeedtest.cloudinary.com , usually it is more than 50%.
The assets can also be manipulated "on the fly”: Cloudinary can add watermarks on the image, i.e. showing the "Sale", "New", and other "stamps".
Those watermarks can contain variables, allowing stamps like "Save 25€" or even "Only for you, Mauro", of course adapted to the format of the image you are showing.
This is impossible to achieve by producing images manually.
And we are only scraping the surface: Cloudinary uses advanced AI algorithms to provide features that 5 years ago where science fiction! Here are some examples:
- The compression of the asset is dynamic: a "simple" image or video can be compressed more than once with a lot of details, without creating artifacts. Cloudinary automatically determines the optimal compression level.
- Cloudinary can automatically tag assets depending on their content, with a selected level of confidence. Not only objects can be recognized, but also position and identity of faces, or color palettes. Think how quick you could be in searching an image for a campaign by typing "One woman with a red handbag"!
- Images can be cropped in a "smart" way: Cloudinary understands where the important content is. For instance, if you have a rectangular image with a model sitting on the right, asking a square version of the image won't just cut the sides, but will produce a square centered one on the model.
- The same thing applies for videos. If you have a normal 16:9 video of a person walking, Cloudinary can deliver to mobile phones a video in portrait mode, with the cropping following the person in the video.
A tool like Cloudinary doesn’t only bring technical advantages for your team, but allows for a level of personalization, contextualization and engagement that has easily outgrown the traditional approach.
Frankly, I would use a DAM.
