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.
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)