November, 2000:
Keeping Your Sites Svelte

While many high-tech news stories tout big bandwidth and high-speed Internet connections, the truth is that most Web surfers still connect to the Internet via dial-up phone connections. With this in mind, it is important to make your sites as user-friendly and quick-loading as possible, even if you are one of those lucky enough to have a high-speed connection. As someone impaired by a 26.4K connection, this is a big issue to me. :)

• Use a 3^rd-party graphics application—NetObjects Fusion has very simple graphics abilities. If you want to have optimized graphics, you’ll need a good 3^rd-party solution. There are a lot of them ranging from under $100 to almost $1,000. For a good listing of the ones around or below $100, have a look on the eFuse Web site.
   
• Choose the right format—The standard graphics formats for the Web are GIF and JPG. To keep it simple, one rule of thumb to use when choosing a format is that if the image is line art or drawn, GIF is the way to go. If you are using photographs, save them as JPGs.
   
• Resize your images in a graphics program—NetObjects Fusion does have the ability to stretch an image to any size, but aside from very minor adjustments, I would recommend not using it. It’s not that it doesn’t do the stretching; it’s just that it only changes the height and width of the graphic and does nothing for the actual file size.
  
  For example, if you have an 8”x10” image of a product and it’s file size is 1 megabyte, using the stretch option to make it 2”x2.5” in size will result in a smaller image, visually, but the physical file size remains the same. It’s still a 1 MB file that the visitor must  download, even though the file is visually smaller. To make the image smaller, use a graphics program to resize and optimize it. Your visitors will thank you.
   
• Slices are better than one big piece—If you have a large image that takes up a good portion of your page, an image that is not a background, it is often a good idea to slice the image up in smaller pieces. For example, if you have an image that has a dimension of 4”x4” and an 80 Kb file size, even after optimization, it will appear to load very slowly when the viewer visits the page because that whole 80 Kb file is being loaded at once. This is very frustrating to the visitor. So, how can you “trick” the visitor into thinking that 80 Kb file is loading faster than it really is? Simple. Slice it up into bits.
  
  1. Using that graphics program again, split the image into smaller chunks and label each saved images in a manner which will allow you to put them back together like  Picture_1, Picture_2, etc.
  
  2. In NetObjects Fusion, create a table that will hold the slices. So, for example, if you made four 1”x4” slices (assuming the image is in landscape mode), create a table with one row and four columns.
  
  3. Place each image in a column, then select the table and make sure the settings for table border, cell spacing and cell padding are set to “0”.
  
  4. Your image is now back together and looks to be one single piece, although it is really four pieces.
  
  So, after all that, is your image smaller? Nope. But, when the viewer visits the page, each smaller piece will load, and these will come up faster individually when compared to the one big piece.
   
• Re-use graphics—Once an image is loaded, the browser doesn’t have to download it again, no matter where or how many times it is used, because it is stored (cached) on your PC. So, plan ahead with your graphics and try to re-use them as much as possible. As an example, instead of have several sizes for a product, have one or two. Less loading = happier visitors. And this leads me to thumbnails.
   
• Use Thumbnails—If you are selling a product or displaying pictures, you’ll want to show them off in all their glory. Great! But don’t hit your visitors with one big, full-size, high-resolution image as soon as they hit your product page. Be kind and give them thumbnails!
  
  Thumbnails are small, and often lower-resolution images that load quickly and allow the viewer to get an idea of what the product looks like without having to wait to see it in it’s 8”x10” glory.
  
  Most graphics programs offer tools that will do this automatically, or, if you only have a few, create them yourself by making a copy of your image and resizing to, say, 100-150 pixels wide. Your customers will thank you. Also, if you want to automate the task a bit, there is a thumbnail component available that works with NetObjects Fusion. You can get it here.
  
  And while you´re making your thumbnails and setting up links to the bigger images, add a little text note telling the visitor how big the file is that they are about to load.

© 2001 NetObjects, Inc. All rights reserved. Privacy Policy