Dunia Games - Image Optimization (Innovation)

Image optimization is a feature to compress the image on the fly, so the CMS admin does not have to compress it manually anymore before uploading it. The purpose is to support the improvement of the page speed score, which affects the SEO and also the usability for the user.

The background is simple. From the audit of the mobile performance, the image asset is the second heaviest load of the page after the javascript, and the image that is uploaded through the CMS is always in its original size, because the admin is not a technical person who thinks about the format and the dimension of the image.

So the solution is an image optimization service. The image is requested through that service together with the format and the width that are needed, then Sharp compresses and resizes it on the fly, and returns it in a modern format such as WebP. The service itself is built with Express on top of NodeJs. Node-cache holds the result in memory so the same image does not need to be processed again and again, Crypto HMAC secures the parameter of the request so the service cannot be abused by anyone to process any image, and Growth Book becomes the feature flag so the feature can be released gradually and turned off directly if there is a problem. On top of all of that, Cloudflare CDN saves all the compressed images, so the next request is served from the edge and the load speed improves even more.

The result can be seen directly from the example that is attached in the link. The original image is a PNG of about 700 KB, and after it goes through the service it becomes a WebP of about 32 KB with the width that is really needed by the layout, which is around 95 percent smaller, and it is already served from the CDN cache.

This improvement comes from my own initiative. I proposed it to the management, and after it was approved I made the backend service and integrated it into the Dunia Games website, so here my role is as an engineer for both the backend and the front end. And what makes me proud, the other projects then took this innovation as the reference for their own implementation on their Telkomsel projects.

NB: Source code cannot be shared because it is a company asset.

Proposal

Result