All of you who have web surfed for any length of time have seen the text-only sites we once enjoyed using at 14.4 or 28.8 dialup speeds morph into graphic-laden monsters that choke fast broadband connections. They don't call it the "World Wide Wait" for nothing.
- The longer your site users have to wait, the more likely it is they will click away from your site, never to return.
So what's the problem?
Once upon a time, designing a web was done with laborious hand-coded html. Now, you have slick point and click tools like NetObjects Fusion. With these tools, it is far too easy to bloat your site pages with dozens of graphics.
- All those cool automatically generated mouse-over buttons and banners are not optimized for file size and therefore,
- They can add a long wait for your site users when they view your page.
How do you optimize graphics for file size?
Tweaking graphic files for size is a big topic, and one that I'm not qualified to discuss in great detail. But, on the web, basically:
You want to pick the right file format for the image. You want to trade off some quality of the image for a saving in file size, so.
- With images that have photographic detail in them, use JPG.
- For images that are mostly areas of solid colour, use GIF.
Good graphics software will let you set file save parameters that drastically reduce file size:
- With JPG files, you can set higher compression (which reduces quality)
- For GIF files, you can reduce the number of colours in the image.
Another strategy is to "slice" images for the web. For example, instead of using a single 400x75 pixel image, chop the graphic into four 100x75 pixel images, and place them into a table. The total download file size will be about the same, but it will "render" in the user's browser faster, because the four "slices" come down simultaneously.
These strategies are fine when working with a few images at a time. But what can a Fusion Webmaster do with those dozens of automatically created banners and buttons?
What you need here is a way to tweak all your buttons and banners at one fell swoop. One such product is Ulead's SmartSaver Pro. (http://www.ulead.com)
With SmartSaver Pro, you can reduce the size of all the banners and buttons on the site by an average of 45%. This means your pages download much faster than they would otherwise, and that gives users less reason to click away.
If you use SmartSaver Pro with Fusion, you will want to modify your site publishing procedure. The simplest method is:
- Set your site to publish "by asset type." (This makes Fusion save the banners and buttons in one location: your \local publish\assets\images\autogen folder.)
- Do a local publish.
- Turn SmartSaver Pro's batch processing tools loose on the files in your ..\autogen folder.
- Test your site thoroughly before any problems with it affect your site users.
- Upload your site manually with a 3rd-parth FTP tool like WSFTP.
Do I hear laughter?
You can almost hear the folks who are hand coding their HTML and creating every single graphic on their site with advanced tools like Adobe Photoshop laughing at the rest of us. But you can get the last laugh by combining the automation and power of tools like Fusion and SmartSaver Pro.
Does that make you lazy, or just smart?
Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive