Installation
First step...install pngquant
If you're on MacOS, simply do:
brew install pngquant
If you're not on MacOS, please refer to the pngquant homepage for installation instructions.
https://pngquant.org/
Running pngquant
The next step is to run pngquant on all your files you wish to optimize.
For example, if I have my .png
files in my app/assets/images
directory, I would do the following:
cd app/assets/images
# Grab all png's by recursing through current directory.
# Quality and speed can be adjusted to personal needs.
# this is what I use.
pngquant ./**/*.png --quality 65-80 --speed 1
This will generate a bunch of files with the -fs8.png
suffix like so:
.
├── file-1.png
├── file-1-fs8.png
├── file-2.png
├── file-2-fs8.png
├── file-3.png
├── file-3-fs8.png
├── file-4.png
└── file-4-fs8.png
Im sure theres a way to have pngquant
overwrite your files, but this
lets me do an easy comparison of before / after sizes. Then I'll rename
the newly optimized files to overwrite their original file.
Bash Command
This is the command I use to rewrite all my newly optimized images to
overwrite their parent. Use with caution :)
for FILE in ./**/*-fs8.png; do original=${FILE%%-fs8.png}; mv "$FILE" "$original.png"; done
Pulling it all together
Quick easy command to do it all at once.
pngquant ./**/*.png --quality 65-80 --speed 1
for FILE in ./**/*-fs8.png; do original=${FILE%%-fs8.png}; mv "$FILE" "$original.png"; done
By using this method, I managed to get my ~2-4mb PNGs in a site I'm working on down to ~100-400kb.
Good luck and may your png files be forever optimized!
Top comments (0)