In the past, we implemented a CDN to reduce bandwidth costs by 80%, and our page speed increased as the CDN cached images closer to the user. As an additional improvement, I proposed transforming the images to make them smaller and using a next-gen format to reduce the size even further. At that point, the business didn’t see the value in this, but a few months later, guess what? I was requested to check how we could improve the listing page speed.

My research was already done, and my proposal was the same as months ago. We agreed on paying for image transformation; the cost was fairly cheap. Today, we transform more than 200,000 images monthly, and the billing is lower than $100.

For the implementation, we pass some parameters to the CDN that we already implemented. For our use case, the parameters defined are size, quality, and format. The CDN also provides options to crop and blur the image if required, which in our case could help as some of the images are really graphic, but for now, we are going to limit the post to size optimization.

Our implementation was simple: a method receives the original URL and also the size, quality, and format. The size is based on the image container size, so it doesn’t matter if you are using a phone or a large screen, the image will be optimized. After testing different numbers here, it was clear that if we set the Quality to 70%, the image quality is acceptable, and the size in MB is reduced considerably too. For an extra reduction in bytes, the WebP lossless format was selected as, on average, the format is 30% smaller.

A great feature of the CDN is that after generating the optimized image, it also gets cached by the CDN, so there is no need for the CDN to re-create the image, and this also speeds up the loading time.

JPG and PNG images were improved with this implementation, but the real speed up came from the GIFs. In the past, there were GIFs over 90MB loading. In the following image, we can see that the GIF size is reduced by over 80%.