Why Not Just Create Your Document in Microsoft Word and Use the “Save as Web Page” feature

Why Not Just Create Your Document in Microsoft Word and Use the “Save as Web Page” feature?

The short answer: Code bloat

Word processors (and, to a lesser extent, WYSIWYG editors like FrontPage) tend to place more code in a page than is actually needed to render that page in a browser. Some are worse than others, but none are as efficient as manually adding HTML tags with a text editor. MS Word may produce as much as 10 times the amount of code needed to display a page. A lot of this bloat comes from unnecessary or unnecessarily repeated tags such as the (W3C-deprecated) <font> tag. More comes from empty tags as in <div></div>

To demonstrate this, I have two versions of this page with the same content and basic layout:

One created in MS Word and converted by using the “Save as Web page” feature.
One created by copying and pasting the text into a text editor and adding a few HTML tags.

The page you are reading now is version #1.

To see the dramatic difference, look at both versions by opening them in your browser and choosing View > Source.

Editing Images

No matter how you obtain your photos, they are probably not instantly ready from the source for publishing to the web. The goal of most digital camera makers is to make an 8x10 print from a computer printer that rivals a 35mm print from a photo-finisher. Their mantra is "Megapixels". For print purposes, more is better. For web purposes, this is not the case. Your goal is not printing, but reasonable load times and acceptable quality on-screen. Most printers (even the cheap ones) will print at 600-1200 dots per inch (DPI). But even the most expensive monitors available have no more than 76 DPI resolution. You will save huge amounts of server space, load times and bandwidth by reducing the resolution of your photographs to 72-76 DPI. The beauty of this is that your pictures look no different on-screen. Scanning software usually has a resolution setting, use it to achieve the same purpose when scanning prints.

Resolution only plays one part in achieving your goal. Reducing the physical size of your picture also helps greatly. There are 2 ways of doing this and you can use either or both depending on the picture:

Reduce the size of the entire picture. A 640x480, 1 Mb, BMP reduced to 320x240 (one-half the original dimensions) will reduce the file size to 250kb.
Crop out unnecessary backgrounds. A lot of amateur photographers fail to fill the frame with the subject, resulting in a tiny subject against an overwhelming background. Sometimes, cropping leaves you with less than one-quarter of the original image. That reduces the file size to one-eighth of the original. Kinda cool — you improve the picture and reduce file size all in one step!

Some pictures need a little "help" to improve color, brightness, sharpness, etc. This can be done with a photo editing program like IrfanView using brightness, contrast, and "gamma" controls until it looks good to your eye. It's sometimes amazing how, with a few minutes work, you can make an almost unusable photograph acceptable for viewing on-screen.

Finally, convert the file from its original format to JPEG, if it isn’t already. Yes, it's lossy and you lose resolution and detail. But most image editing software will allow you to determine the amount of "loss.

In the end, and with very few exceptions, your photographs should be less than 100kb and preferably between 30 and 70kb depending on where you are using them. If they will be "in-line" on a page, i.e. they are part of the page and there may be 2-4 pictures on a page, keep toward the smaller end. If you are using "thumbnails" to display them, you can use larger files for the actual image since they are displayed one at a time.

Web Page Design http://www.oocities.org/wayne31r/webdesign