A Horror Story

A friend (we'll call him “Fred”) asked me to look at one of his pages. I soon regretted it, since, on a 28,800 baud modem, the page took ten minutes to download. When it finished, I scrolled through. It had about 2K worth of text, four medium-sized pictures, and ten thumbnail pictures of Fred's co-workers.

Why did it take so long to download? One of the thumbnails, being displayed with width="46" and height="56" was actually being scaled down from 332 by 176, To add insult to injury, Fred had saved these scanned photos as GIF files, which, as we know, explodes their size. The picture mentioned above, for example, was 76K bytes as a GIF; as a JPEG it would have taken about 20K.

In short, Fred had made every mistake we've been talking about so far. How on earth could Fred have missed this problem? Actually, several factors conspired to hide the problem from him.

1. Fred was using a What-You-See-Is-What-You-Get (WYSIWYG) editor that let him simply drag a photo onto a “canvas” and resize it by dragging little handles on the image. Since his image was in memory while he was editing, the scaling happened instantly.
2. When he tested his page, the browser read the image file from the hard disk. At hard disk speeds, the images came in almost instantly.
3. Fred works at a university, so when he uploaded the HTML file and the images, he was using a high-speed transmission line, and didn't notice any significant delay.
4. The first time he viewed the web page from the server, he may have noticed a delay (since even a high-speed line is slower than a hard disk), but it wouldn't have been anywhere near ten minutes.
5. Since the images from the server were now in the browser's cache on Fred's hard disk, he could reload that page and have it load at hard disk speeds again.

This combination of circumstances kept Fred blissfully unaware that his single page was consuming far more disk space than it had to, and was downloading at the speed of cold molasses.

Don't let this happen to you!

• Always save scanned photos as JPEG
• Don't trust a WYSIWYG editor to do what's best for you
• Test your pages on a slow connection so you know how it will feel to the folks at home
• If you want a thumbnail of a large picture, pre-scale it.

To find out what that last item means, please continue to the next page.