Don't let bloated images chase readers away
Chasing the copy line of Bennie's critique this month, Fred asked if I could take a loot at Hernandez's "Chihuahuadogs dot com" site and see what kind of speed savings we could achieve. Of course I'm always up for a challenge, so, off we go.
- Analyze the page
The first thing I do in a review like this is to take a look at what's happening on the page. I use the browser's "Info" command to get the statistics of the page:
This page took nearly 2 minutes at 56K. That suggest some serious optimizing is in order. The pop-ups and their graphics only add to the loading time.
- Content length is around 14 K
- Total of 17 graphics must be loaded
- Major graphics, approx: 444K
- Minor graphics, approx: 120K
- Pop-up #1: 12K
- Pop-up #2: 2,009 char, + GIF = 11 K
- Pop-up #3: 10,259 char + img = 146
- Grand TOTAL loading: 747 K
- The oveall length of the page is about 5.7 feet tall, requiring nine to ten screen-scrolls to get to the bottom. WOW! Too long.
- Before and After JPG Optimization
As an illustration, I'm only going to concentrate on the major graphics, a total of 444K.
In the example above, you see actual screen captures of the "Info" dialogs for two compared files -- "Family" before, and "Family" after. There are a couple of things to note here:
- The 'before' version has a thumbnail and icon attached. These can add up to 20% more size to the file. Get rid of those prior to uploading. (They're simple to turn off in Photoshop or Photoshop Elements.)
- The "after" version is about 18K compared to the 66K of it's original
- Virtually no degredation of the actual image.
With this kind of savings, all six of the major images can be optimized to occupy about the same size and download time as a single existing image. (The originals being nearly 4-times as large as they need to be.
This example was optimized only about 70%, meaning there was more room to go. I only stopped there because I did not want to degrade the image.
See for yourself: "Family" Before, and "Family" After
- A second test
Just to check myself, I tested one of the other images and this time came out with better stats, from the original's 57K down to a tidy 13K.
I use a program called "ProJPG" for optimization, which I've found to do the best job of retaining image quality for the smallest possible file size. (I've provided a screen capture of ProJPG in a sidebar window.) If you look at that screen, you'll see the relative sizes of the files, and the estimated download times. The optimization is quite impressive -- yet you see very little degradation. This can also be done in Photoshop, ImageReady or Photoshop Elements, just walk through the "Help" files on saving JPGs.
So now you see how the load times can greatly be decreased. But let's go one step further...
- Color Tables
The intro graphic, and then the step graphic separating the sections are GIF files. I noticed the first one "Flowers" was loading quite slowly. It's 60K.
By working with its color table (Click to see it) I was able to trim the colors down to only 64, from a starting point of 263. In the example, notice that a number of the palette chips are dithered. That's because the image was actually attempting to raster colors beyond the 255 GIF standard. I suspect I could have wrenched that palette down to 32, but again I was trying to retain as much image fidelity as possible.
Pop-Ups: really in bad taste
From the owner's stand point, they should really evaluate the value
of the pop-ups to their own benefit. These pop-ups serve only
to insult, and perhaps even anger the visitor. They came there for
a reason. The pop-ups in no way support that reason.
Furthermore I was incensed to discover that
had I not been protected, that some sort of program would have been installed on my system. (See the screen capture) This is unconscionable. I've contacted the owner to ascertain what this is all about and if it
really brings enough returns to be beneficial to their mission. I suspect not.
This particular pop-up has at least three paid banner ads. That skyscraper to the left is bringing some major bucks. Consider that every single visitor to this site rings the "Free Yellow" cash register -- when in reality the ads have nothing what so ever to do with the site, and the site owner is not being compensated for running the ads, nor loss of readers who don't like pop-ups. (I always have my cookies off so they didn't make anything off me.)
Taking these few measures will greatly enhance the usability of the page, and make for a more memorable experience.
- If you'd like step-by-step tutorials on optimizing your images in Photoshop, ImageReady, GraphicsConverter, or Photoshop Elements, just let me know.