electron / website

:electron: The Electron website
https://electronjs.org
Apache License 2.0
111 stars 127 forks source link

chore: use pngquant to optimize PNG images #583

Closed dsanders11 closed 2 months ago

dsanders11 commented 2 months ago

Uses imagemin-pngquant to optimize PNG images at build time.

Significantly reduces the size of images used on the home page, shrinking transferred size from 4.4 MB to 1.2 MB.

It's technically lossy optimization, but I don't think anyone can tell the difference between this and this unless you've got Superman eyes.

Before:

Before

After:

After
dsanders11 commented 2 months ago

The compelling reason is the significant reduction in size for imperceptible visual change.

I briefly tied a lossless optimizer on one of the larger files as a test and it was something like a 15% reduction, compared to 75% with pngquant.

dsanders11 commented 2 months ago

Had an offline discussion with @ckerr regarding his comment, and moving ahead with taking the easy win here and we can follow up with other improvements in the future, such as committing losslessly optimized versions of the files to begin with. 👍