May 14th 2023
Image Sizing and Compression is one of the most important factors, when it comes to Page Speed and SEO. Images need to be scaled properly to improve load times. Using larger images is penalized by Google and Search Engines and affects your website ranking.
Cloudinary is one of the best tools for Dynamic Image Sizing, Compression and Optimization. Combined with Sitecore capabilities it delivers fast and scaled media to ensure your website meets SEO standards and requirements.
To give you an idea, we saw our Lighthouse Performance Score go from 72% to 97% by using Cloudinary.
In a recent project, I had to build a Cloudinary Connector for Sitecore XM 10.3, and thought I'd share it with the community, in case you are using Cloudinary too. This might save you some time.
When building this connector, I had 2 main objectives in mind:
Avoid additional burden to the Content Authors. They shouldn't have to manage content in Sitecore, Images in Cloudinary and have the responsibility to link them.
Build it in a way that we can easily revert back to serving images from Sitecore or connect another third-party if we need to.
To achieve the first objective, I decided to use the Sitecore Item Saved Event and Deleting Event, to track Media Library changes in Sitecore and automatically sync those changes with Cloudinary.
Anytime an image is added or edited, it would be uploaded to Cloudinary using the same path from Sitecore Media Library.
If an image is deleted in Sitecore Media Library, it will also be deleted in Cloudinary.
Using the exact same path in both systems, make it easy to serve the images from Cloudinary based on Sitecore Media Item.
To serve the images from Cloudinary I chose to override the OOB Sitecore Media Provider and specifically string GetMediaUrl(MediaItem item, MediaUrlBuilderOptions options) method.
All Images served from Sitecore go through this method.
To achieve the second objective, I had to make sure the Cloudinary Connector is built as a Feature project using Helix Principles, so if the project is removed you fallback to serving images from Sitecore.
I am also using the fallback in case there is any connection issue with Cloudinary.
Installation steps:
Clone the repo here
Update Alyas.Feature.CloudinaryConnect.config with your Cloudinary Credentials.
Choose your settings (IsResponsive, FormatAuto, QualityAuto) in the same config file.
Add the Feature project to your Sitecore Solution.
Important Notes and Usage:
If you're using IsResponsive = true, check this link for how to enable Responsive Images on the Front-End based on your Javascript Framework. The image URL built by the Connector will include c_limit,w_auto/dpr_auto, the JS script will then replace these with responsive values.
If you're using IsResponsive = false, the image will include the height and width from MediaUrlBuilderOptions (If any).
Cloudinary offers many more functionalities than what is covered by this connector. This connector is focused on Dynamic Image Resizing, Compression and Responsiveness. If you like to implement other Cloudinary functionalities, the connector can easily be extended and customized.
I Hope you find this Post and Connector Helpful. Feel free to leave questions and/or comments.
Useful Links:
Comentarios