In continuation of the previous articles Importance of Digital Assets & Image Management, this article now focuses on how does the platform processes the images from the moment they are uploaded until they're delivered.


This is how the image process works

  1. The user uploads a jpg / png image into the Media Library or specific Product or Brand or Category or Banner.
  2. The platform automatically converts the image into WebP format - a modern image format optimized for the web. 
  3. The system stores the original image also in the media library and keeps the image converted into WebP format as well. 
  4. Now, when an user is browsing the website from a desktop and opening a PLP (Product list page), the platform invokes the image url with a simple parameter in the query string. eg https://www.yourwebsite.com/products/image1.webp?h=500 

    ORIGINAL

  h=300







How does it work 

This is where the magic happens, when the images are accessed with the query string param of h:

  1. The image service in the platform internally compresses and resizes the image for that height, maintaining the proper aspect ratio.
  2. As a result, the images rendered are much more optimized for being displayed on the website. 
  3. Does this not affect the quality of the image: yes, it does affects the quality so there is a process involved in finding the most optimum metric to optimize the images to ensure that they are not blurry and at the same time are also performance friendly. 
  4. Even an increase of 10 units in the parameter could lead to increase in size by 10-20%.
  5. Following is a simple demonstration of increase in size when the unit is set to 300, 600, 1000 respectively
     

Important Questions


Do I have to define a fixed parameter "h" for all the images across the websiteNo. The parameter is defined based on the device and image placements and the need (zoom or thumbnail). So, for eg:
PLP Desktop - it would be 400
PLP Mobile - it would be 300
PDP Desktop - it would be 600
PDP Mobile - it would be 400
At what point is the "h" parameter defined ? Can I change it once defined ?The parameters are defined at the time of initial configuration & development of the website. 

It can be changed at later stages as well, however you always need to be mindful of the performance impact of increasing this in the favor of image quality. So, there has to be the right balance.  


Why is this so important and why should I follow

  1. Lets assume, you are displaying 40 products on PLP and you have 2/3 variants per product (you use mouse over image change), so you will be having approximately 120 images to be downloaded & shown to the user.
  2. Now, imagine that the avg image size is 500kb, so the total image bandwidth would be 500x120 = 60,000 KB (approx 58 MB) 
  3. You would not want your users to be opening a PLP page which is 58 MB - because most likely 70% people will leave the site even before it opens. 
  4. This will be a massive deterrent for customers using mobile - which is the primary device for majority of the customers.
  5. Now, compare this with the optimized version where your images are possibly optimized upto 100kb per image, the image bandwidth goes down drastically and delivers a better customer experience.  
  6. A general guideline is that - images should be less than 100kb for the web and that is what we aim to do with this