Published on

Optimising PNGs For Web

Authors

Today I had to optimise a webpage to make it much lighter on data. The biggest culprit in the given pages was really large PNGs.

Normally in this situation, I reach for ImageMagick. But after a bit of Googling, it looked like ImageMagick was not the best tool for this job - according to one of the comments in this question

In the same question and answer above the one answer suggests using the command-line tool called pngquant

Using this ended up sorting out my image size issues. I ran it as follows:

pngquant 256 *.png

This means, reduce all png images in the current folder to 256 colours (it uses a 256 colour palette).

It also does some default optimisation and adds a suffix -fs8 to your files to indicate the optimised file

Once you are happy to remove this suffix

  • move these to another folder
mv *-fs8.png myOtherFolder
  • and run
for f in *.png; do mv -- "$f" "${f%-fs8.png}.png";done