Articles

Archive for the ‘png’ tag

Optimizing PNG images for the web

Posted at 2:16 pm by brett on December 21st, 2009

Under categories: Ubuntu,Web Development and tags: , , , ,

Since Internet Explorer 6 is no longer the major browser used by most Internet users, it is now safe for us web developers to use PNG images exclusively in our designs.

My personal portfolio uses the PNG image format almost exclusively, especially where quality matters, but also uses JPG and GIF where smaller file sizes make sense.

Unfortunately, since PNG files provide such high quality (and therefore large file size) images, it isĀ imperativeĀ to reduce the size of your images for loading time (be nice to your user) and bandwidth (be nice to your server).

Thus, in Ubuntu, you can install a wonderful program called optipng that allows you to compress PNG files without loosing quality.

First, run
sudo aptitude install optipng

Secondly, change the directory to where your PNG files sit
cd /path/to/png/files

And then run this code to losslessly compress your PNG images
for file in `ls *.png`; do optipng $file ; done

The algorithm is not recursive, so you have to go into each folder that contains PNG images and run the command above. I saved several megabytes on my image-intensive portfolio by running this optimization.

Enjoy!