Cloudinary Blog

How the Cloudinary-Magento 2 plugin can optimize performance and your bottom line

Magento Image Optimization with the Cloudinary Plugin

Update October 22nd 2019: Cloudinary has released a newer version of the Magento extension. Using the new Magento extension, you can manage and optimize media assets with Cloudinary, and customize your pages with a stylish product gallery. Read more here

Cloudinary has teamed up with Inviqa, a selected partner of Cloudinary, on creating a module to help Magento 2 users benefit from everything Cloudinary has to offer. Here Rick Peacock, with the help of Paal Soberg, a senior software engineer at Inviqa, takes a closer look at the new plugin.

The Cloudinary Magento module – available since 2014 – makes it easy for Magento shop owners and Magento developers to benefit from Cloudinary's services. The plugin links your Magento website to your Cloudinary account, allowing your teams to manage and automatically serve all your product, category, and content management system (CMS) images directly from Cloudinary.

To help Magento users get even more value from the plugin, Cloudinary recently teamed up with Inviqa. We worked together to further improve the plugin’s performance and usability, make upload operations more resilient to network issues, provide upload alternatives for sites without a Cron setup, and to allow sites to use Cloudinary transformations to apply creative effects to their images.

But we also wanted to ensure that users of Magento’s latest platform – Magento 2 – had full access to Cloudinary’s services. That was the thinking behind our dedicated Magento 2 module.

5 Visual Engagement Tactics That Convert Online Buyers

Why Cloudinary for your Magento store?

There's no doubt that images, and more recently also videos, take center stage for most e-commerce sites, and are essential for bringing in, and keeping customers. But ironically, these images and videos are also the main culprits slowing down your page load time. And it's a known fact that slower page load times equate directly to nasty impacts on conversion rate, bounce rate, and session lengths:

Magento infographic
From: Akamai's Spring 2017 Online Retail Performance report

So it follows that you should be doing everything in your power to deliver your images and videos in the most optimized way possible.

Cloudinary is a backend cloud service for image and video media. Among its specialties is delivering automatically optimized images and videos via fast content delivery networks, to ensure that every media file that is delivered to each user's browser or mobile phone is as small as possible while maintaining the desired quality level. Cloudinary also offers valuable features such as face-detection-based cropping, automatic color replacement and a whole selection of other powerful image and video transformation capabilities.

Cloudinary is generally targeted at Web developers, but the dedicated Cloudinary Magento module has been designed so that non-technical Magento users can easily 'plug-and-play' these capabilities into their store and enjoy those essential optimizations and other features, with no coding required! But web and mobile developers can still dive in and take advantage of the full power of all Cloudinary features or even fork/clone the open-source Cloudinary Magento plug-in and customize it to their heart's content.

So let’s take a look at what the Cloudinary Magento 2 module offers.

Installing and configuring the module

As with the legacy Cloudinary Magento plugin, the Magento 2 plugin is very simple and streamlined. Just download the module from the Magento Marketplace. Once installed, enter your Cloudinary account details into the module configuration page, and set a few preferences, or keep the default settings.

Migrating your media to Cloudinary

The average Magento store tends to have hundreds, or maybe thousands of images, many of which are in high resolution since the goal is to show products in the best-possible detail – especially when viewed using a magnifier widget.

To take advantage of Cloudinary's capabilities, you’ll first need to upload all your shop images to your Cloudinary account so they can be optimized and served by Cloudinary’s super-fast content delivery network (CDN).

A manual upload would be problematic to scale for any site with many images, and risks issues of web server timeouts, network glitches, etc. To address this, the Magento 1 Cloudinary module offered a background process to handle bulk image migration, but setting this up and validating the process is more technically complex.

What if there was a way of skipping the bulk migration entirely?

There is!

New auto-upload mapping

You can now avoid manual migrations and the complex process of background bulk migration using the new auto-upload mapping feature.

In the Cloudinary Module Configuration, just switch on the auto-upload option, hit save, and that's it! Your images are uploaded to Cloudinary automatically upon request, and most importantly, with no downtime. Each individual image in your store continues to be served via Magento until successfully migrated to Cloudinary, and then Presto! Magento image optimization.

We recommend using the new auto-upload feature for all Magento sites. There is no migration process to handle, images are lazy-loaded on-demand, so no demand spikes will hit your web server, and synchronization between Magento images and Cloudinary is handled automagically. Furthermore, using this mode does not require any checks to see which images have been uploaded to Cloudinary, so database lookups are avoided. This can be significant, especially for high-traffic sites with many category pages and images.


The big 'P'. This is what it's all about. We know the performance of your Magento site is critical to your success. That's why the Cloudinary module includes an impressive set of performance improvements to shave those precious seconds and milliseconds off your page load times:

Automatic image format optimization

When this option is enabled (default), Cloudinary analyzes each image, determines which image format will give the smallest file size with the best quality, converts the image to that format, and then serves the image. All instantly and automatically! What’s more, Cloudinary even detects which image is best for the particular browser your customer is using, serving WebP to Chrome browsers or JPEG-XR to Internet Explorer.

Magento image optimization is also safe to use with images that have alpha transparency since Cloudinary automatically checks whether an image has any transparent areas, and ensures the format it serves can maintain the transparency.

Automatic image quality

You always want to deliver your images at a quality that will invite them to look closer and get the best possible impression of your products. But in almost all cases, it's possible to deliver an image at a resolution significantly lower than the original professional photograph, without any quality reduction that would be visible to the human eye.

The problem is that the amount you can compress or otherwise adjust any image without sacrificing the required level of quality differs significantly from image to image.

Luckily, Cloudinary has a sophisticated automatic quality algorithm that analyzes each image to find the best quality compression level and optimal encoding settings based on the specific content of that image. Cloudinary automates this file size versus quality trade-off decision, on-the-fly, using perceptual metrics and heuristics to make precise adjustments of the compression level, complemented by fine-tuning of the encoding settings. The result is a significantly reduced file size without any noticeable degradation.

Additional Magento image optimizations

Whenever you apply any format or quality optimizations to Cloudinary images, Cloudinary also automatically performs other optimizations to reduce file size, such as stripping unnecessary metadata from photos and applying other optimization algorithms.

Additionally, when you apply both automatic quality and automatic format optimizations, the two settings work together to achieve a result that's even better than the sum of the two parts.

So what does this mean?

All these processes make significant savings to image sizes, and therefore reduce page loading times for customers. That means you can be certain your images are of the optimal size and quality no matter what format the originals are in, completely automatically!

New image transformation features

With the new image transformation features, Magento stores can now leverage powerful chained transformations to process images in any way imaginable.

Cloudinary has a vast array of effects, shape modifications, enhancements, cropping, and overlays. What makes these even more powerful is the ability to chain each process to create truly unique enhancements.

Default image transformation

Say your site has changed to a theme that requires all images to be displayed with rounded corners to a radius of 30 pixels. Editing your images one by one is going to be very time consuming, but Cloudinary has a better way.

You can easily apply rounded corners globally to all your images using a default transformation. To get the effect on your store images, just head to the Cloudinary module configuration page, enter ‘r_30’ in the ‘Default Image Transformations’ section. and press the preview button to review the effect before anything is changed on your store. Looks good? Hit ‘Save’ and the effect will be applied to all images managed by Cloudinary.

image with rounded corner

This is a great way to improve the look of your entire site or give it a unique touch without requiring tedious manual edits.

Of course, you might sometimes want to apply a special effect or transformation to a specific image. To do this, select the Cloudinary tab on the Product Admin page to see all the images for that product, select the image you want and enter the transformations required. Then hit ‘preview’ to test the effect before saving.

This can be a great way to add overlays to your images, say special-offer logos, without the headache of configuring formats, sizes, and adjusting quality for web optimization!

For details on all available image transformations, have a look at the Image Transformation Guide and Reference in the Cloudinary documentation.

Delivering video with Cloudinary

Magento 2 added the option to embed videos in your store pages. By default, Magento supports delivering via YouTube or Vimeo URLs. But if you use Cloudinary, you can upload your videos to your Cloudinary Media Library and supply a Cloudinary video URL instead. This enables you to take advantage of all the video transcoding and transformation capabilities of the Cloudinary video solution.

The bottom line -- literally

With Cloudinary, any Magento site owner can look forward to improved site performance, which directly translates into an improved turnover. Use the Cloudinary module to simplify image and video management and open up creative options for pain-free image transformations.

For more details, head over to the Cloudinary Magento module page on Magento Marketplace.

Rick Peacock is a senior software engineer at Inviqa, a technology partner and consultancy specialised in e-commerce, content management solutions, and custom software development. Get in touch to explore how we can support your digital journey.

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more