October 30, 2019

Compressing all pngs in a directory with pngquant

On a project I’m working on currently we’ve been using a lot of uncompressed png’s, which is killing the pageload of nearly every section.

I didn’t want to have to manually compress every file and as a result came up with a little solution using pngquant.

First find all the files in the directory you want to compress, so lets use find for this.

find src | grep '.png'

The output should look something like this.

src/components/assets/testing/icon.png
src/components/assets/testing/app.png

Now just pipe the output into xargs and run pngquant on it for each line.

find src | grep '.png' | xargs -L1 pngquant

Boom, all the files will now be compressed


Previous post
The tech behind building an independent, internet radio station Earlier this year I founded and built an internet radio station in Sydney called Nomad Radio. When I set out to create the station, I knew nothing
Next post
Adding storybook to a Typescript + Next.js project The recommended way of adding storybook to a project using TypeScript on the official storybook documentation doesn’t actually work. It required a