I’ve previously talked about using PNGDistill to optimize batches of images, but in today’s quick post, I’d like to show how you can use the tool to check whether images in your software binaries are well optimized.
For instance, consider Chrome. Chrome uses a lot of PNGs, all mashed together a single resources.pak file. Tip: Search for files for the string IEND to find embedded PNG files.
With Fiddler installed, go to a command prompt and enter the following commands:
cd %USERPROFILE%\AppData\Local\Google\Chrome SxS\Application\60.0.3079.0
mkdir temp
copy resources.pak temp
cd temp
"C:\Program Files (x86)\Fiddler2\tools\PngDistill.exe" resources.pak grovel
for /f "delims=|" %f in ('dir /b *.png') do "c:\program files (x86)\fiddler2\tools\pngdistill" "%f" log
You now have a PNGDistill.LOG file showing the results. Open it in a CSV viewer like Excel or Google Sheets. You can see that Chrome is pretty well-optimized, with under 3% bloat.
Let’s take a look at Brave, which uses electron_resources.pak:
Brave does even better! Firefox has images in a few different files; I found a bunch in a file named omni.ja:
The picture gets less rosy elsewhere though. Microsoft’s MFC140u.dll’s images are 7% bloat:
Windows’ Shell32.dll uses poor compression:
Windows’ ImageRes.dll has over 5 megabytes (nearly 20% of image weight) bloat:
And the Windows 10’s ApplicationFrame.dll is well-compressed, but the images have nearly 87% metadata bloat:
Does ImageBloat Matter?
Well, yes, it does. Even when software isn’t distributed by webpages, image bloat still takes up precious space on your disk (which might be limited in the case of a SSD) and it burns cycles and memory to process or discard unneeded metadata.
Optimize your images. Make it automatic via your build process and test your binaries to make sure it’s working as expected.
-Eric
PS: Rafael Rivera wrote a graphical tool for finding metadata bloat in binaries; check it out.
PPS: I ran PNGDistill against all of the PNGs embedded in EXE/DLLs in the Windows\System32 folder. 33mb * 270M devices = 8.9 petabytes of wasted storage for imagebloat in system32 alone. #ImageBloat Raw Data: https://docs.google.com/spreadsheets/d/17FisQU-oV0_QExsCRJJXZwH1mgb6x7fTWlCQmU_fpz4/edit?
text/plain 
I’m surprised Chrome doesn’t use WEbP for it’s images. Also when it comes to images, using a program like Irfanview and then by hand reducing the bitdepth may gain even more savings (disable dithering and enable best color quality) which is a lossy process obviously, I then use PNGGauntlet to squeeze a little more out of them.
WebP is an interesting idea. Because the PNG files Chrome uses are generally small, the small compression window of DEFLATE is less of a problem. Nevertheless, let’s see what lossless WebP encoding would save us on the 210 PNGs inside resources.pak:
for /f “delims=|” %f in (‘dir /b *.png’) do “c:\program files (x86)\fiddler2\tools\cwebp.exe” -lossless “%f” -o “%f.webp”
PNG: 343,720 bytes
Webp: 261,750 bytes (76.15% of original)
Savings: 82000 bytes
How to repack this resources.pak? How to auto repack win files?
“Rafael Rivera wrote a graphical tool for finding metadata bloat in binaries; check it out.” – Can you give ready exe file?
Generally, an end-user doesn’t have any practical way to “repack” the optimized resources; the best they can do is point the developers at this post and request that they optimize before packing.
Rafael’s tool is linked in his article (see the GitHub link); I don’t know if he’s made it available as binaries or only source. PNGDistill is included with the free Fiddler download.