Fortunately, Google's PageSpeed Insights will not only test your site and rate its performance, but also give you tips on which areas of your site can be sped up. The really neat part is Google will tell you how much data you can save in each area, which really helps you know which areas to target to optimize performance.
After writing a simple PHP script to compress the jpg images and optimize the pngs, the savings were significant. The script reduced images to a maximum width of 800px, and a jpg quality to 75%. After some initial tests, 75% was an optimal balance of image quality and file size. The directories I used contained a variety of images, including small clipart and full resolution photos.
Here are the results from the script:
|Directory||# of Images||Initial Size||Optimized Size||Percentage|
|/images/||197||22.98 Mb||3.1 Mb||86.47%|
|/photos/||66||49.21 Mb||2.59 Mb||94.72%|
Not bad! Lets take a look at Google PageSpeed Insights to track the improvement:
Much better! Now we're performing at 85% instead of the low 20% range. There are still some improvements that can be made, but with some quick image optimization the page load time is significantly improved.
Check out your site's performance at Google PageSpeed Insights