The Best Image Loading Optimization

Enhancing the image loading feature in your eCommerce stores is highly important. It is a must to offer a good shopping experience to your Customers. Increasing the speed of image loading also ranks your eCommerce store better on the search engines.

 

Studies show that a second delay of image loading drops conversions by 7%, page views by 11% and customer satisfaction by 16%

In Spurtcommerce, a NodeJS and Angular based open source eCommerce solution, we have used the best methodology and approach to enhance the image loading feature. We have optimized the entire process to the best extent so that the overall process of image loading is fast, without keeping the Visitors wait longer to get a quick view of the product.

We have followed the three key important steps while optimizing the process of image loading in Spurtcommerce.

 

Step:1 - Images are uploaded into Amazon AWS S3 Bucket

The image that the Vendor or the Admin uploads from their panel, while adding a product, will be received as it is by the system and the image gets stored in the S3 bucket.

 

 

Step: 2 - Lambda function to define different dimensions for on the fly cropping of images.

In the next step, we have written a Lambda function, which is a program to specify different dimensions for which the images has to get cropped on the fly. Through this program, you declare different dimensions to which the images need to get cropped. You will also be restricting other dimensions for cropping, apart from the dimensions you have specified. So, one needs to be absolutely be clear while specifying the dimensions for cropping here.

So, depending on the requests from the end users, the images get cropped on the fly at that point and displays.

 

Why are we using Lambda Function

In order to maintain concurrency, when there is more traffic and when more number of visitors are browsing through the eCommerce platform, requesting for more and various images to download, a separate Lambda function that defines different image sizes for on the fly cropping is always feasible.

 

 

Also, in future, when you are changing the overall design of the eCommerce platform, and if you wish to have more images, say for example, for a particular product, you show two or three images on the detailed page, and you will additionally show related products images. In further, if you want to show another additional image of another dimension, things become hassle free for you, as you just have to revise the Lambda function with the new dimension for on the fly cropping.

So, on the whole, you will be avoiding adding additional images for different sized images, and in turn you will be maintaining only one single primary image in the S3 Bucket, for each product, with a provision for multiple resizing in the Lambda function.

 

Step: 3: - Integration to Cloud Front

When there is a request from the Customer, the Cloud front will call the API and connect with the S3 and Lambda. Then, the particular image is fetched from the S3, resized and cropped through Lambda function and then delivered to the end-user through CDN layer. This CDN layer caches all the images that are delivered, based on the end-user's location, in the particular delivery network. A primary CDN, will have several sub-networking areas, where the caches of different images get stored. Whenever there is a request from the end-user, instead repeating the entire process, the cached image from the nearest delivery network gets delivered and displays to the end-user. So, this approach makes the entire process of image delivery faster.

 

 

To minimize the distance between the visitors and your website’s server, a CDN stores a cached version of its content in multiple geographical locations. Each geographical location contains a number of caching servers responsible for content delivery to visitors within its proximity.

 

Wrapping Up:

This way, the Spurtcommerce team has used the best approach to enhance the entire feature of image loading in their eCommerce Solution.

To evidence the image optimization in Spurtcommerce solution, you may check out these links refresh, before and after optimization.

 

Before Optimization (No Lambda NO CDN)	https://backend.spurtcart.com/api/media/image-resize?path=Product/WomensFashion/&name=Img_1560324409296.jpeg&width=260&height=260
Before Optimization (Lambda With out CDN)	https://images.spurtcart.com/serverlessrepo-Spurtcommerce-Image-ResizeFunction-18J85ZAL6WY5I?path=Product/MensFashion/MensGrooming/&name=Img_1560836294848.jpeg&width=260&height=260
After optimization (Lambda with CDN)	https://image.spurtcart.com/?path=fashion/&name=Img_1601124081998.png&width=260&height=260

 

For any other queries, you may write to support@spurtcommerce.com