Skip to content

Broadband is making web designers lazy

posted by Eric Puidokas September 28th, 2006

We’re all spoiled.  As a web designer, I’m used to having the latest computer with the fastest connection.  Probably everyone reading this is in a very similiar situation.  But that doesn’t mean there aren’t others with 56k connections on 400mhz computers.  In 2005, more than 60 million americans were still using dial-up connections , but all too often we forget they even exist.
I’m guilty. You’re guilty.  At some point, we’ve all cut corners.  We’ve traded 5 minutes of own time for 2 seconds of each of our user’s time.  It may not seem like a big deal, but those seconds can really add up.

Just one example

One of the things I’ve noticed lately is websites not optimizing their logos.  I’ve run across two places just today where I noticed this problem.  Slashdot and Lycos Mail.

Both sites tile a simple background behind their logos.  However, instead cutting out the background in their logo images, they repeat it.  That’s a bunch of useless information that can be easily removed from the logo.

Easily you say?

In just a few short steps, the extraneous information can be removed from these images.

  1. Copy the image to a new layer
  2. Place the background tile in a new layer on top of that
  3. Change the blending mode of your background tile layer to ‘Difference’
  4. Merge the background tile layer with the one below it
  5. Use the Magic Wand tool (low tolerance, no antialiasing) to select all of the black in your new layer
  6. Delete that selection from your original image
  7. Save as a transparent GIF

By using this method, I was able to cut off 2.85k and 1.6k from the Slashdot and Lycos Mail logos respectivley.

Original logos
Slashdot (7.09k)
Lycos Mail (5.37k) 

Optimized logos
Slashdot (4.24k) 
Lycos Mail (3.77k)

Sure, a couple kilobytes may seem like no big deal, but let’s not forget what it was like to browse before we had our broadband.

Comments Post a Comment

David Runion says... December 13th, 2006 at 7:42 pm

/. is using both the Prototype and the YUI library (and not the whitespace-and-comment-free versions of the YUI library either. For example, using the minimized version of http://images.slashdot.org/yui/event.js could save 48K, and using the minimized versions of all the YUI tools could save, by my calculations, 185k) has a lot more to do with their bulk than their 7k logo.

Laziness indeed!

Diffusion Confusion » Programming and Designing for the Web says... July 20th, 2007 at 2:27 pm

[…] pixel width patterns seem like a smart choice. They will give you a smaller filesize and remember, every byte counts. However, 1 pixel width means your graphic won’t be able to use diffusion, thus making your […]

Post a Comment

Extra information for this entry