Experimenting with PNG and JPG Optimization
While revamping PBS’ Image Transformation Service, we did some experimentation on which PNG compression tools were right for us. For more on our ITS rewrite see our post announcing its availability here.
One of the biggest concerns in web development is asset management, and this is particularly true where images are involved. As the number of images served on a site increases, the amount of bandwidth needed to serve the site also increases. There are a lot of options when it comes to image compression & optimization, but few have the time to sit down and do extended comparison of multiple tools at once. So, this summer, we took some time to do some experiments using PNGQuant, OptiPNG, PNGnq, PNGCrush, JPEGOptim, and Python’ Pillow. This is an abbreviated version of our findings.
The basic setup for the experiments was a collection of about 150 ‘mezzanine’ size images (1920 x 1080 and below). We used the following commands:
jpegoptim — strip-all — all-progressive -o -v -m<quality> -d<output_folder> img
image = Image.open(img)
image.save(<result.jpg>, “JPEG”, quality=<quality>, optimize=True, progressive=True)
pngcrush -reduce -brute img <out_folder>
pngcrush -reduce -m<compression_method> img <output_folder>
pngquant — force — verbose — output <output_folder> -s<speed> img
optipng -clobber -v -o<optimization_level> -out<output_folder> img
pngnq -v -s<speed> -d<output_folder>
The fastest quality setting for JPEGOptim was 10 (~ 0.1 seconds). On average each image was compressed by about 87%. The fastest quality setting for Pillow was 1 (~ 0.2 seconds), with an average compression of 93%.
Pillow’s highest quality is 95 (as suggested in Pillow’s docs), and it took about 0.3 seconds on average with a compression percentage of about 6%. JPEGOptim’s highest quality setting is 100, which also took about 0.3 seconds on average with a compression percentage of about 11%. As expected, these settings offered the most compression, but was the slowest setting for JPEGOptim. (Pillow’s slowest setting was 6, with an average compression of ~ 90%)
The visual measuring of the results didn’t seem to have much difference from the original images at medium to high quality settings, but eyes may vary.
There were two runs for PNGCrush — one using the brute force option and one using the method used the most by the brute force option. The brute force run took ~ 77.6 seconds per image with an average compression of ~ 22.5%. OptiPNG took at most ~ 165.6 seconds per image at optimization level 7, and at least ~ 0.08 seconds per image at optimization level 0. The average compression was ~22% for all levels except for level 0, where the compression average was ~ 0.14%. PNGnq had average run times that ranged between 0.69 seconds and 2.81 seconds, and all speed levels compressed the images by an average of 66%. Finally, PNGQuant had run times ranging from 0.4 seconds and 2.4 seconds, with average compressions of about 60%.
PNGCrush was by far the slowest and it doesn’t do much compression compared to the time it uses. This low level of compression means that images remain relatively unchanged, but the time spent compressing images on cloud computing services would quickly stack up to make this an expensive choice for PNG optimization.
OptiPNG had some of the same issues that PNGCrush did, with the time spent compressing an image not really being offset by the amount of compression accomplished. It also maintained the quality of the images really well.
PNGnq has consistent compression as well. As expected, the most compressed image returned had some quality degradation, but so did it’s least compressed image. The noticeability of the degradation depended on the image, but in the case of it’s fastest speed level, the least compressed image seemed to have more noticeable loss of detail. So, although it’s level of compression is consistent, the level of quality varies greatly between each image for a given speed level.
PNGQuant has fairly consistent compression across its speed levels, and the quality varied from being nearly the same as the original image at the first speed to some noticeable degradation at the fastest level. The quality of speed level 10 for its most compressed image is fairly good although some spots suffered some degradation, particularly with background gradients in the image. For this reason, out of the four softwares tested, PNGQuant with a speed level of 10 is recommended.
In the end, the best tools for ITS’ purposes were Pillow and PNGQuant. For a more detailed analysis of the results see the JPEG Optimization Issue and the PNG Optimization Issue on the GitHub repo.
