HWG-News Tips Early January 2000
Optimization Techniques Tips
HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the Early January 2000 newsletter, for the category 'Optimization Techniques'.
This issue's winner!
When designing a site, try to know and understand your target audience. As as example, for my personal site, fully 48% cannot view CSS, and of the ones who can it's a 60/40 split between IE and Netscape. And a little more suprising, 38% of the total cannot view frames!! So if I were to use frames for navigation I would need a good alternate site available, and if I used CSS heavily, the site wouldn't function or look proper to very many of my visitors. So I always try to keep in mind who the visitors to any site may be.
--Submitted by Brian <firstname.lastname@example.org>
Other Submitted Tips
Chop your image file sizes by reducing the number of included colors. Most images can lose about half the colors they begin with -- and not lose quality! Try Fireworks's export feature to quickly learn about this technique (free trial at http://www.macromedia.com/). Photoshop and other image program pros can do this manually.
-- Submitted by Matt Kreps <email@example.com>
One way I have found to speed up the loading of a page is to take large images and cut them into small images to make up the large image. You also can reduce the number of colors used in the image to reduce file size without changing the appearance of the image. Both ways of changing image files will help speed up the page loading.
-- Submitted by Joe Meyer <firstname.lastname@example.org>
Want to make your pages *seem* like they display faster? Always divide one TABLE into two (or more) chunks, so your visitors will have something to view, while the bottom areas are still loading.
-- Submitted by Alan C. Baird <email@example.com>
When using tables and other sorts of alignment tags, always be sure to test them on other monitors with different resolutions. This way you can be sure that all of your viewers get the relatively same information in about the same format. This is especially important if your are designing on a computer with an inferior monitor with bad resolution settings.
-- Submitted by Brandon Anderson <firstname.lastname@example.org>
Netscape supports an element in the IMG tag called lowsrc. If you use it, Netscape will load the lowsrc image first and load the src image after. This is great for pages with several large images.
-- Submitted by "The Mahi Mahi" <Mahi_Mahi@prodigy.net>
First CROP your graphic! By cropping you focus on the subject, giving it better definition, while losing unnecessary space.
-- Submitted by Lynda French <email@example.com>
Do you want to use frames, but don't want to hurt the Search Engines' capabilities of indexing your site? Go ahead and insert your META tags into the <HEAD> as you normally would, and then use the <NOFRAMES> tag to put in at least a paragraph of Search Engine optimized text.
-- Submitted by Anne McKay <anne@divinitydesign>
Avoid blank lines. Blank lines take up extra space and slow down page loading times. This can occur on any HTML-editing program, so check the results AFTER saving, since many programs re-format source HTML (even edited source) before saving.
-- Submitted by Alfred Karl Kornel <firstname.lastname@example.org>
Speed up the loading of small style elements by reusing the same small graphic images more than once and on more than one page. You can vary the look of small colored icons used as bullets and lines by varying the HEIGHT and WIDTH attribute. Download once - use many times.
-- Submitted by Mike Zets <email@example.com>
Does your table cell background not show in Netscape but does in IE? Solve it by inserting a nbsp; into the cell and the background will appear!
-- Submitted by Chelsey Gourgaud <ChelseyG@mamsoft.co.uk>
In my experience in working with subcontractors who are familiar with
design for print, I have found that the simplest, yet most often
overlooked, way to optimize a JPG photo file is to convert it from 24-bit to
-- Submitted by Michael Liimatta <firstname.lastname@example.org>
Decrease your image colors using Paint Shop Pro or other graphic program before posting on your web site.
-- Submitted by Craig <email@example.com>
Pre-load images for your entire site by inserting them at the bottom of the opening page or splash page (usually named "index"). Set the image HEIGHT and WIDTH attributes to 1x1 pixels, so they'll be virtually invisible to the user. Subsequent pages using those images will load much faster.
-- Submitted by Gerilyn Brander <firstname.lastname@example.org>
When using tables, set the width attribute to 100% or less. The table will then size itself to conform to any viewer's browser and/or screen size, and also prevent the need for left/right scrolling. Just make sure that your graphics will fit in a browser/screen size that is smaller than the one you are designing on. An example where I used this technique is at http://members.xoom.com/thunder_fans/thunder.html.
-- Submitted by Bill Gentry <email@example.com>
Comment out lines in a CSS file using:
-- Submitted by Peter England
If you have an image that takes ages to load, specify the path to a low-res or black/white version of the image in the LOWSRC attribute of IMG. It will come up first, and gradually disappear as the better quality one loads.
-- Submitted by James Ussher-Smith <firstname.lastname@example.org>
Want to have smaller pages that load faster and that contain the same amount of information? Then NEVER use WYSIWYG (what you see is what you get) programs, they always put extraneous lines in the code. If you use programs like that, always clean up the files before you upload them.
-- Submitted by Mihai Zaharie <email@example.com>
More HWG Resources on Optimization Techniques