I recently visited the new website for Edina's First John Philip Sousa Memorial Band, a group that we've enjoyed now for over 15 years. I noticed a significant delay in loading the site's banner image and decided to investigate.
I found that the original image was a standard (i.e., non-interlaced) PNG image. I decided to see what would happen if I remade the image as a progressively encoded, slightly compressed JPG image.
The following images demonstrate the results. Please note that the PNG version has a transparent background around the edges so I'm going to employ a black background here to simulate the original conditions. (Note; the images below require a wide format display to be rendered accurately, e.g., something wider than 1024 pixels. Viewing these images on a very narrow device will be unpleasant as the images are likely to "break the theme.")
Here's the original PNG:
Here's the JPG:
Can you detect any differences in the images?
I did some investigating using Firefox with Firebug to see how the changes affected the statistics. Some notes:
- The original PNG image is 799.2KB KB; the JPG is 68.2 KB. That's a very significant savings of over 91%.
- The receiving time of the original image was 468 ms while the receiving time for the JPG was only 119 mn. Again a significant savings of almost 75%.
- Depending upon your internet connection speed, you may have noticed a significant delay as the original image was "painted" from the top to bottom, line by line.
OK, so how did I make the changes?
My photo editor of choice is PaintShop Pro, so that's what I used. Photoshop is a more common (and expensive) photo editor that has similar capabilities. Of course, I used a PC, however, the concepts here are not platform specific. Other image editing programs could have been used as well.
- I copied the original image from the band's website and stored it locally. (Hint: Right click)
- I opened it with PaintShop Pro.
- Since JPG images cannot have transparent backgrounds, I added a (raster) layer, applied a black "flood fill," and moved this layer to the bottom. Now, this image looks like the original did when rendered on the website.
- I saved the image in JPG format, specifying a "compression value" of 25. I also set the format to "Progressive." The progressive format will prevent the image from being painted line by line from the top when viewed on a slow connection, or when the server is slow.
Notes about image formats
PNG images, like GIF images, allow great detail and transparent backgrounds. Many webmasters, including me, like them when we want exact control and the ability to have transparent backgound (GIFs and PNGs) and semi-transparent colors (PNGs).
PNG images tend to be larger than equivalent images in other formats. This can sometimes be mitigated by reducing the size (number of colors) of the color palette.
PNGs, and GIFs, are lossless encoding techniques. The don't compress well.
JPG is a lossy format. We can increase compression if we're willing to accept a reduction in image quality.
At low levels of compression, JPG image quality losses are quite tolerable, especially considering the benefits. This is particularly true for images on the web where image quality is limited by the viewer's display device.