benchmarking

benchmarking copied to clipboard

It seems the generated png files are totally unoptimized. Not a big deal, but savings could be pretty big, even with just optipng -o7:

E:\foo>optipng -o7 web_tooling_benchmark.png
** Processing: web_tooling_benchmark.png
808x723 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 201040 bytes
Input file size = 201406 bytes

Trying:
  zc = 9  zm = 9  zs = 0  f = 0         IDAT size = 136387
  zc = 9  zm = 8  zs = 0  f = 0         IDAT size = 135136

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0         IDAT size = 135136

Output IDAT size = 135136 bytes (65904 bytes decrease)
Output file size = 135214 bytes (66192 bytes = 32.86% decrease)

I think it'd be a good addition even if it's not -o7 but something lower.

I'm not familiar with how things work, so I'll leave this for someone more familiar with the codebase to do it. I'd probably just use imagemin, configured just for lossless compression.

Another thing worth looking into (although TBH I'm not in favor yet since it's not a standard) is using loading="lazy" or a simple solution like https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video#using_intersection_observer

I quickly did optipng -o7 *.png and it goes from 1.86 MB to 1.36 MB. And that's lossless.