Building a Cordova based mobile application recently at work we were facing an issue with an application size that was literally growing by the day. The project leveraged a lot of PNG templates sent to us by the design department and these template files were contributing about 50mb to the total size of the application.
So the search was on to reduce the size of the project. One of the front end developers on the project ran a few of the PNG templates through the compression service at tinypng.com and was pleased to find the size reduction was around 75%. But with a deadline looming he just didn’t have the time to compress all of the images as there was a few hundred images spread across multiple directories.
Automating the Process
I got told about the size improvement and took at the service, to see if I could help out and was pleased to find they had an API available allowing you to optimize up to 500 images per month for free. The documentation and API examples were pretty comprehensive and showed the process to be very straightforward. Simply POST the contents of an image along with your API key to a web service and it will return the location of an optimised copy of the image for you to download.
One of the API examples from the website I took then expanded into a simple PHP shell script. Given a directory to search it will go find all to the PNG files recursively underneath the location. Then post the images to the tinypng.com web service for optimisation and then overwriting the original file with the new copy. The code has been put up on Github so hopefully it can help save others time on their projects in future. So next time you have to optimise the PNG files in your web project feel free to give it a try. With our files we found the service managed to reduces the file sizes on average between 70 – 75%.