Web 2.0 Performance Optimization - Images

The work that I've been doing around performance optimization for the WebLogic Portal Web 2.0 Playground site has made me realize just how truly bloated things have become. In the early 1990's I was building electronic brochures for PCs running DOS with 640k memory and 256 color VGA displays. This was before most people had ever heard of the web, and things like Flash, AJAX, and so on were unheard of. These apps certainly didn't do as much or look as nice as modern web-based apps, but one thing that they were was efficient! We spent a lot of our time optimizing the images and code to ensure that everything would fit onto a 1.4M floppy disk and run correctly within the tight confines of the PC.

So how does this ancient history relate to what I'm doing now? I've been doing some of the same type of optimization in order to make our site run better. While there are relatively few restrictions on modern computers compared to those ancient PCs, there are limits in the form of available bandwidth. If you've read my previous entries you've seen what a difference can be made by optimizing the resources for the application based on the restrictions imposed by the medium. Call me crazy, but I think that this sort of thing is fun, and I have to wonder how much better all software could be if it weren't so bloated.

PNG Optimization

I became a fan of the Portable Network Graphics (PNG) format when I realized it was lossless, unlike JPEG, and supported transparencies and other features better than GIF. Most modern browsers and tools support it well, and there are some nice utilities available. It's not suitable for everything, and in fact I've gone back to JPEGs for some large backgrounds, but it's arguably the best all-around format today.

A problem with PNG is that many image editing programs don't do a good job of optimizing the files. They include extraneous information when they save the files, and if I had to guess it is because they take a general purpose approach and save everything. This is fine for editing and sharing, but the extra bloat is not helpful when deploying these images in a web application.

The good news is that there are several utilities that can be used to optimize PNGs, and I would recommend that everyone doing web development have one in their arsenal. If you are interested in the technical details check out A guide to PNG optimization by Cosmin Truţa. After trying a couple of the free and online tools, I found that I really needed good batch mode support and ended up purchasing PNGOUTWin from Ardfry Imaging, LLC. I am not affiliated with them in any way, but I do think that they have a great product that is well worth the price.

So how good is the compression? It really depends on the image, but 10-30% seems to be the average range. For our site the total savings for the PNGs used in various look and feels ranges from 8% to 25%, although the actual savings are higher as some of the larger PNGs are replaced with JPEGS. This might not sound like a lot, but when all of the images that are on a page are taken into consideration it adds up quickly.

Optimizing Other Formats

For the sample look and feels most of the images are PNGs, but there are a few GIFs in use for the titlebar images. These are typically fairly small and won't benefit much from optimization. If you do want to optimize the GIFs, most paint programs offer options for reducing the number of colors.

As stated earlier, you may wish to use JPEGs for things like photographs, large header graphics, backgrounds, and so on. JPEGs will typically be smaller, and offer lots of compression options if you're not picky about the quality. There are some cases where a PNG will be smaller, but these are typically mostly empty. Be careful when working with JPEGs if you think you might want to edit the images later, as once they're saved as JPEGs they are often mangled by the compression. The various JPEG cleanup tools only go so far, and you may spend time using pixel-level editing tools trying to restore images, which is not fun!

I'm still going to go over CSS optimization and some other things in this area, but my next entry is probably going to dive into Disc and REST a bit more, and will include a new way for you to play with them live on wlp.bea.com. Stay tuned!