We had a client who wanted us to redesign their blog website. After having a discussion with the design team, we realized that the existing article images were not correctly sized, and that we had to create multiple aspect ratios for images to be hosted on various devices, like desktops, and mobile, tablet, and Retina-enabled devices.
Another requirement was we had to compress the images so they could render better in low bandwidth devices. The client was fine with manually uploading images because there were thousands of articles and each article had more than 10 images. However, after some time we realized that we also needed to create specifically sized images for the article widgets, but this size ratio could not be determined until the design of the site was finalized. We then had to take over uploading all of the images to the articles.
Considering these points, we started thinking about automating the resizing and compression of images. We used the Sitecore CMS to manage the content of the site, as well as all of our images on the site. Initially, we created a utility to resize the images on the fly by supplying the height and width. We stored high-resolution images with every aspect ratio in the CMS and the utility was able to resize and compress all of them. However, there were issues with this approach. First, the on-the-fly processing was taking time, especially when it was rendering pages with a multitude of images. Second, we lost the CDN advantage and kept resizing the same images again and again in each article request.
After going through this, we realized that it was better to resize and compress every image ratio first, and then store them in the Sitecore image fields to deliver when requested. This allowed us to increase our performance and regain the CDN advantage.
Major Benefits of our Solution
We were able to generate compressed images of different sizes, such as a 6 MB image in 350 KBS with a high-quality display.
We reduced almost 80% of the time of the Sitecore content manager.
We achieved faster article page rendering using the device-based respective image size.
Flow Chart
Screenshot of the Resized Images in Fields
Steps Performed to Accomplish The Task
1. Input the article image fields in Sitecore for every aspect ratio, as well as a respective Boolean flag to turn the resizing on and off. For example:
Ratio
Image Fields to link (high resolution images)
Boolean Flag to turn resizing on and off
1:1
Square_2880x2880
Square_1920x1920
Square_960x960
SquareImageResizeAndLink
2:1
Wide_4320x4320
Wide_2880x1440
Wide_1920x960
Wide_960x480
WideImagesResizeAndLink
8:3
Extrawide_4320x1620
Extrawide_2880x1080
Extrawide_1920x720
Extrawide_960x360
ExtraWideImagesResizeAndLink
The Boolean flag will turn off after the image is resized so as to avoid accidentally triggering while the item is saving.
2. Create a configuration file to manage image resizing, with specific templates and fields with dimension details.
3. Write both a class and methods by using Sitecore DLLs and the .Net system. Draw namespace to resize and link images in the Sitecore content items. There is a code snippet below for reference.
The main methods for this are:
OnItemSaved: An OnItemSaved event is an entry point to trigger the resize feature. It takes the Sitecore item as EventArgs and manages the editing of the item by using other helper functions like reading configuration, call auto resize, and create new media item function.
CompressAndResizeImage: This function returns the byte array of a resized image and inputs the stream, new height, new width, and an image format.
CreateMediaItem: This function is used to create a new media item by supplying the stream, CMS path, file name, extension, and CMS DB name.
4. The Sitecore configuration changes to register and trigger the resize class in the OnItemSaved method.
After all of this was done, we demonstrated it to the client with Sitecore users running through with some article images and the design team integrating new images into the site. The client highly appreciated the way we automated and achieved the goal, as it would have been a painstaking and costly process to manage manually.
The post Automatically Resize, Link, and Compress Images Using Sitecore appeared on 3Pillar Global.