Front-end enginerring: Image compression

I recently participated in an IBM Webshpere Commerce Server deployment and was surprised when I ran Google's PageSpeed against the site, that it suggests the use of image optimizers on the stock widget graphics. The analysis for one of our pages was as follows:

The detailed message under the Learn more link was helpful in that it linked to the tools they suggest using - bookmarking it here for reference:

Use an image compressor.

Several tools are available that perform further, lossless compression on JPEG and PNG files, with no effect on image quality. For JPEG, we recommend jpegtran or jpegoptim (available on Linux only; run with the --strip-all option). For PNG, we recommend OptiPNG or PNGOUT.

Tip: When you run Page Speed against a page referencing JPEG and PNG files, it automatically compresses the files and saves the output to a configurable directory.

I would expect an off the shelf tool to do these kinds of optimizations on their own graphics before shipping, no? Some of the absolute numbers seem small, but every 1.5K is a packet that doesn't need to be sent, and this is a small step to make for such an easy gain.

Frontend Engineering

With all the talk about Google PageSpeed in the past several months, I have developed an appreciation for learning how to improve user's experiences through better management of the conversations between web browser and server. These concepts pertain to an area of discipline that is being called Frontend Engineering.

Given tools like PageSpeed, it is a shame that many sites still fail to address the issues it reports. Easy gains are often had by following the advice it offers.

I hope to document some of the issues I encounter as I work through them in my day job, involving a large application that I'll call Big Enterprise App (BEA). I'll aim to compile from this a series of Frontend Engineering entries.

Update: Here is a good description of the topics Frontend Engineering deals with. The most succinct description I've heard for this kind of work so far is "responsibility for View Source."