Some Graphical Words

Home | Resources | Joomla Articles | Some Graphical Words

This article is a little hard to categorize since it is a general web development tip and does not pertain to Joomla in particular. But since so many Joomla templates are graphics-intensive it is probably an important topic to visit.

I am afraid I snorted outloud when a friend showed me his compressed Javascript that saved 25K on his home page--and he also had images that could have been compressed 20 times that amount. Yes, 20 times! My advice for anyone looking to speed up their Joomla site is to start by optimizing your image files.

So let's start with a question: Which graphic format employs the best compression?

Answer: It depends.

There are basically two formats that are both widely supported by browsers and provide high quality compression: JPEG, of course, but also GIF. In fact, you may be surprised to learn that in many circumstances GIF is better. Here's why:

The name of the JPEG format is the key to remembering when to use it: JPEG stands for Joint Photographic Experts Group. It was designed to provide high quality digital compression for photos. Photographs are actually fairly difficult to compress because of the high degree of variability in the data. There are rarely large sections of solid color. Instead, even apparently solid colors like skin and eyes are made up of thousands of variations, as this magnified view of my grandson illustrates:

Will's Eye Up Close

William

Now contrast that picture with the Joomla Gizmos logo:

JoomlaGizmosLogo

Even when enlarged, the logo still has major areas of solid color, as do most web graphics.

The point of it all is this: JPEG will give you the best compression for photos, whereas GIF will usually provide the best compression for most graphics created by hand. The JoomlaGizmos logo is about 3.5K when saved as a GIF, and 5.6K when saved as a decent quality JPEG.

JPEG can actually achieve higher compression if you can tolerate a loss of quality. In some photos, a few blurry spots in the background is an acceptable trade-off in exchange for saving 90% on the size. But the only way I could get the JPEG version of the logo to be much smaller than its GIF counterpart was to make it look like this:

JoomlaGizmosLogo

Not so good.

The moral is this: The more photographic-like the image, the greater the chance that JPEG will provide better compression. The more "block" and vector-like the image, the more likely it will be that GIF will do a better job. If in doubt, try both.

Ultimately, just remember that optimizing your images can make a big difference in page loading times. It is an easy thing to forget once you have that page looking just right.