If you’re using PNG images on your web site, there is the possibility that the file size is considerably bigger than it needs to be, and because of this, can take longer to download, and give the impression of a slow loading web site, and may even count negatively against your site in Google’s search index, as Google now considers page speed as a ranking factor.
But don’t worry; you can reduce the file size of almost all of your PNG images by compressing the image date, without affecting the image quality itself, ensuring a speedier web page for your site visitors.
This is because the PNG image format is a lossless format, which means that when the image data is compressed, it is done so in a way that doesn’t cause the actual image to reduce in visual appearance. Unlike the JPEG image format, which is used for photographs, a PNG image doesn’t “throw away” bits of image data to get smaller. It uses the same method as a ZIP file, which allows for files to be compressed and uncompressed without loss of data.
The problem is that a lot of image editing software that is used to create a PNG image does not fully compress the image data when saving the PNG file, and often includes additional meta data that isn’t necessary for the final image to be included in a web page. Software such as Microsoft Paint and Adobe Photoshop are known to achieve poorer PNG image compression, which is unfortunate as these are popular PNG image creation packages.
Packages such a Adobe Photoshop and Adobe Fireworks often contain extra meta data in the image so that you can easily edit later on, which is certainly handy, but not recommended as the final image you host online.
Fortunately, there is software available that’ll do a bang up job of compressing your PNG files for you, a lot of which are free, and take very little time to use.
One very good program is PNGOUT, which is a command-line program that’ll compress your image in a matter of seconds. You can download it from http://advsys.net/ken/utils.htm for Windows, Mac OSX or Linux, and using a single line of code, create a copy of your PNG image that’ll most likely be reduced in file size.
All you need to do is enter the name of the PNG image you wish to compress, and your chosen name for the new copy of the image, and PNGOUT will compress it for you. You can compress the current image if you prefer, overwriting the old one, but it’s recommended that you keep the original, as it may contain additional meta data that your image software package needs to edit the image later on.
As an example, lets take the current Freeola Logo, a PNG image that is 4.53KB in size. If we load up PNGOUT, and input the required command, as shown in the screenshot, we can see how well the image can be compressed:
The first file name "freeola-logo.png” is the current image, and “freeola-logo-compressed.png” is the copy that will be created.
The resulting image, as compared below, shows that while the image is visually exactly the same, the file size of the copy on the right is a whopping 75% smaller:
All it took was about 4 seconds for PNGOUT to compress the one PNG image, and it reduced the file size considerably.
If you don’t feel comfortable using the command-line, then a version of PNGOUT is available from http://pnggauntlet.com that includes an easy to use user interface, although this is only available to Windows users. Other compression software exists, which are easily found on Google.
The point of this article was to highlight that your PNG Images can and should be compressed as much as possible, so that they are downloaded faster by your site visitors.
It is highly recommended that when compressing an image, you should create a compressed copy to host on your web site. While it is unlikely anything could happen to the image itself, software packages often include extra metadata in images so that you can easily add / remove / alter aspects of the image later.