To Slice or Not to Slice:
Using Sliced Images and Table HTML produced by 3rd party image software in Fusion
Many of you have asked related questions in the newsgroups.
Background: Why Slice Images?
- Depending on the tools you use, you might cut the overall size of an image.
By compressing unimportant sections of an image more than important sections, you can save total download time and preserve the perceived quality of the image.
- A sliced image downloads in pieces. Therefore, you can take advantage of multiple browser download threads to cause the image to appear quicker than it might if the image was in one piece.
- Because more things are happening on the screen during the image download, it gives the user something to look at while they are waiting.
top of page
What Software Makes Sliced Images?
Many different products do image slicing and HTML generation. A short (and incomplete) list
Here are some samples (these will open in new windows so you can compare them):
top of page
The Fusion Process
Here are the steps to follow:
- Export your current site to a template (better safe than sorry)
- Use your favorite image-editing software that can slice images and create HTML to put them together for use on the web.
- Save the files to a temporary location on your hard drive.
- Test the output in your favorite browser(s).
In Fusion, bring the generated HTML file into your page by doing this:
- Place the cursor in an empty paragraph in a text box or table cell
- On the menu, click Text, Insert Object, External HTML.
- Browse to the location where you saved the sliced images and HTML file from your image editor.
- Clear the check mark labeled Import Head
- Ensure the other check box labeled Do Not Manage or Move Assets is NOT checked
- Click OK.
- (Optional) Adjust the alignment properties tab of the imported HTML icon as desired (default is left wrap).
- Test the locally published output in your favorite browser(s).
- To be sure your hard work will be preserved forever, make another template backup of your site.
top of page
Tips About Sliced Images
Don't take it for granted that your total image download time will be less for a sliced image than for a normal image. It might be, or it might not. There are many variables here, and you must be the judge.
- Take as much time as you need to study the documentation for your image editing software. Slicing a bloated image into bloated slices won't gain you anything.
- Do the math.
Add up the total size of the slices, plus the extra HTML involved in the table tags vs a simple <img source="whatever" alt="whatever"> tag.
Some browsers may render complex tables more slowly than they do a simple image
With small files like my cat and car examples, the difference will be minimal.
- Test the performance from your web server, preferably over a slow dial-up link, before you decide for sure that it's better to slice than to simply embed the raw image.
Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive