Category Archives: Web Design

HTML/CSS Web Design

The easiest way to optimize .png files for improving page speed

If you have a lot of .png images on the website compressing them can save many bytes of data.
I will show how to do it really fast and easy.

1. We will use Pngcrush. It is an optimizer for PNG (Portable Network Graphics) files. It can be run from a commandline in an MSDOS window, or from a UNIX or LINUX commandline.

To install (Ubuntu/Debian) use command:

apt-get install pngcrush

If you need loselessly optimize one file use command:

pngcrush -rem alla -rem text -reduce -brute in.png out.png

File in.png will be optimized and the result saved in the file out.png

If you need optimize all .png files in the folder use command:

for file in *.png ; do pngcrush -reduce -brute -rem alla -rem gAMA -rem cHRM -rem iCCP -rem sRGB "$file" "${file%.png}-crushed.png" && mv "${file%.png}-crushed.png" "$file" ; done

Optimizing .png images will take no more than couple of minutes but result should be significant:
Before:
1

After:
2