The Long, Long Trailer
By Beth Candy
(December 19, 1999)
"The Long, Long Trailer" is a comedy about a cumbersome trailer-home ruining Lucy and Desi's travelling honeymoon. (It's also an allegory for our PageBuilder sites.) Along the way, Lucy weighs down the trailer by collecting rocks from each state they visit to put in their garden at home. The power struggle of Desi trying to stream-line their ride versus Lucy's sentimentality dangerously weighing down the trailer is representative of the struggle PageBuilders have with adding images. We collect and add images as we go along, oblivious to the consequences of their increasing our site download time. Next thing you know our sites are teetering by the unstopping world and unable to download, much like the Long, Long Trailer trying to climb that steep road.
Don't worry Lucy, you can keep your rocks. Let's hollow them out, maybe break them into smaller sizes, maybe toss out one or two. That is to say, you can reduce image size (detected or undetected by the human eye). You can crop an image, utilize thumbnails, make or undo pagebreaks, learn the correct HTML format for a quick download, learn to examine and measure properly, maybe remove one, and even pick up a few pebbles of knowledge along the way.
Tips for a smooth ride:
Reduce Images Visually
You can save downloading time by using an image tool to reduce your image size. Manipulating height and width tags do not save on downloading time.
- Goto: MyImager
- Click on the "File" drop down menu
- Select "Open"
- Input the image URL in the second input box
- Click on "Upload (Click Once)" button
- Click on the "Edit" drop down menu
- Select "Resize"
- Click on the "Select Below" drop down menu
- Select a size e.g., "50%"
- Press the "Resize" button
- If you are not satisfied, press the back button and select a new size
- When satisfied, click on the "File" drop down menu
- Select "Save"
- Click on the temporary URL of your image (highlighted in blue)
- You will see your new image surrounded by black
- Immediately goto an Uploader
- Press the Upload button
- Your reduced image is now in your scrapbook
To replace image with improved image:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on your image
- Click on "Replace this picture"
- Select "Your scrapbook"
- Click on the new image
- Press the "Done" button
- Press the "Publish" button (left sidebar)
- Important: The "Publish" button on the left sidebar is actually a "Save" button. It "saves" any changes you have made.
Reduce Images (undetected)
You can reduce an image file size by reducing the number of colors in the image. The image would remain the same size dimensions, and would not look different to the human eye.
Your image must be in gif format to use Gifworks. If you have a photo in jpeg format, you can upload it to Image Magick, reformat and exit as a gif:
- Goto: Image Magick
- Click on "Use Image Magick Studio"
- (ignore filename)
- Fill in the URL of your image
- Press the "view" button
- press the "output" tab (2nd from top left)
- In the Format box, select gif
- (ignore storage type)
- Press the "output" button
- Click on your image (you will see a zero under it)
- You are viewing your image surrounded by black
- Press the "goto" key
- Press the "show current" button
- Take note of your new URL:
Press the "cmd" and "A" keys to highlight it
Press the "cmd" and "C" keys to copy it.
Now onto Gifworks to reduce:
- Goto: Gifworks
- Click on the "File" drop down menu
- Select "Open Gif"
- Remove the http:// in the input box
- Paste in the URL by pressing the "cmd" and "V" keys
- Press the "Upload Image" button
- Click on the "Optimize" drop down menu.
- Select "Fewer Colors"
- You will see a series of Photos. Under each photo will be the file size in bytes and the percentage of reduction.
- Click on the most acceptable image (down the bottom you can click on the words "Reduce Further")
- Click on the "File" drop down menu
- Select "Save"
- Click on "WebTV Users Click Here"
- You will see your image surrounded by black
- Immediately goto an Uploader
- Press the "Upload" button.
- Your reduced image is now in your scrapbook
To replace image with improved image:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on your image
- Click on "Replace this picture"
- Select "Your scrapbook"
- Click on the new image
- Press the "Done" button
- Press the "Publish" button (left sidebar)
- Important: The "Publish" button on the left sidebar is actually a "Save" button. It "saves" any changes you have made.
Crop your Images
- Goto: MyImager
- Click on the "File" drop down menu
- Select "Open"
- Input the image URL in the second input box
- Click on "Upload (Click Once)" button
- Click on the "Edit" drop down menu
- Select "Crop"
- Click on where you want your new top left corner to be
- (You will not see the effect yet)
- Click on where you want your new bottom right corner to be
- You will see the coordinates you have mapped out. Press the "Crop It" button
- If you are unhappy with what you see, you can press the back button and try again.
- Click on the "File" drop down menu if you are satisfied
- Select "Save"
- Click on "WebTV Users Click Here"
- You will see your image surrounded by black
- Immediately goto an Uploader
- Press the "Upload" button.
- Your Cropped image is now in your scrapbook
To replace image with improved image:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on your image
- Click on "Replace this picture"
- Select "Your scrapbook"
- Click on the new image
- Press the "Done" button
- Press the "Publish" button (left sidebar)
- Important: The "Publish" button on the left sidebar is actually a "Save" button. It "saves" any changes you have made.
Utilize Thumbnails
Considering using a thumbnail (miniature image) as a link to a larger image. This will save a considerable amount of download time.
- Goto: Image Magick
- Click on "Use Image Magick Studio"
- (ignore filename)
- Fill in the URL of your image
- Press the "view" button
- Press the "resize" tab (top right)
- Click on the ball in front of "thumbnail"
- go down, press "resize" button
- press "output" tab (2nd from top left)
- In the Format box, select the format you started with (jpg or gif)
- (ignore storage type)
- Press the "output" button
- Click on your image (you will see a zero under it)
- You are viewing your image surrounded by black
- Immediately goto an: Uploader
- Press the "upload" button
- Your thumbnail is now in your scrapbook.
To replace image with improved image:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on your image
- Click on "Replace this picture"
- Select "Your scrapbook"
- Click on the new image
- Press the "Done" button
- Press the "Publish" button (left sidebar)
- Important: The "Publish" button on the left sidebar is actually a "Save" button. It "saves" any changes you have made.
Make PageBreaks
If your page is complete and if you have no difficulty in editing your site, you may want to utilize PageBreaks as a way to increase your site download time.
Let's imagine that your web page has two photos on it. If you were to "break" that page in half, you would have one photo on the first page. Down the bottom right would be the word "Next" to click on. That Link would take us to page two and the second photo. This could be achieved by placing a PageBreak between the two photos. This would cut your download time in half because you would only be waiting for one photo to download. Also, when you use a PageBreak, the PageBuilder will generate a relative link that is invisibly loading page two while you view page one. When you click on "Next," page two will almost immediately download.
To Insert a PageBreak:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on "Add an item"
- Select "Page Break"
- Your "Page Break" is at the bottom of your page. You need to move it up.
- Press the "move up" button until the "Page Break" is where you want the first page to end.
- Press the "Done" button
- Click on "Publish" (on left sidebar)
- Important:The "Publish" button on the left sidebar is actually a save button. It saves any changes you make to your page.
Note: PageBreaks should not be used on a page that you are having difficulty in downloading to edit. In this case, you should:
- Remove the bottom half of an extremely large page.
- Place it on a newly created page.
- When you publish the newly created page you will get its URL.
- Go back to the original page.
- In Edit, click on "Add an item."
- Select "Link"
- In the description box write "Page 2"
- Fill in the URL
- Press the "Done" button
- Press the "Publish" button on the left sidebar
Undo PageBreaks
PageBreaks should not be used on a page that you are having difficulty in downloading to edit.
No matter how many pages you break, you have to edit them all at the same time. Instead of breaking an extremely large page, you should create separate pages and then link to them.
To undo a PageBreak:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change Page"
- Click on the PageBreak (It says "Choose this to change where the page breaks")
- Click on "Remove"
- Confirm "Remove"
- Press the "Publish" button on the left sidebar.
To create a separate link:
- First, remove the bottom half of an extremely large page.
- Individually remove each image in edit by clicking on the image and the clicking on "Remove."
- Remove text by clicking on it in edit.
- Bring the highlight over the box.
- Press the "cmd" and "A" keys to highlight.
- Press the "cmd" and "X" keys to remove.
- Press the "Done" button
- Press the "Publish" button
- Press the "Done" button
- Click on "Index"
- Either click on "create" to start a new page or click on the page you have already prepared
- Click on "Add an item"
- Select "Text"
- Paste the text in the large box by pressing the "cmd" and "v" keys
- Press the "Done" button
- Press the "Publish" button
- When you publish the newly created page you will get its URL.
- Go back to the original page.
- In Edit, click on "Add an item."
- Select "Link"
- In the description box write "Page 2"
- Fill in the URL
- Press the "Done" button
- Press the "Publish" button on the left sidebar
Inserting your own HTML
When inserting your own HTML code for an image, be sure to include the height and width attributes.
A browser can lay out a page much faster if it knows the height and width it must reserve for an image.
For example:
<img src="http://community-1.webtv.net/SecretAdmirer/doc8/scrapbookFiles/importD12.jpg">
Should be:
<img src="http://community-1.webtv.net/SecretAdmirer/doc8/scrapbookFiles/importD12.jpg" height="232" width="304">
You may have taken note of the image dimensions while at one of the Image Tools. If not, you can:
View your image file (surrounded by black)
The, go directly to: The WebTV Utility
Scroll down about 5 screen lengths.
You will see:
"Find Size and Visually Resize Images"
Because you viewed your image before you came here, your image is loaded on the screen.
Click on "Actual Size"
Take note of the image's height and width.
How to Measure Bytes
A good place to find out how long it takes your page to download is WebSite Garage.
Once there, type in your page address and press "Go"
Click on the "Load Time" diagnostic report.
You will see how fast your page loads in the different modem speeds.
Further down you will see a list of your images, their byte size and some recommendations.
Removing an Image
To replace image with improved image:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on your image
- Click on "Replace this picture"
- Select "Your scrapbook"
- Click on the new image
- Press the "Done" button
- Press the "Publish" button (left sidebar)
- Important: The "Publish" button on the left sidebar is actually a "Save" button. It "saves" any changes you have made.
To completely remove an image from your web page:
- Go to your PageBuilder Index
- Click on your page
- Click on "Change page"
- Click on your image
- Click on "Remove" (left sidebar)
- Confirm the "Remove"
- Press the "Publish" button (left sidebar)
- Important: The "Publish" button on the left sidebar is actually a "Save" button. It "saves" any changes you have made.
Pebbles of Knowledge
Here are some random pebbles of knowledge you may want to pick up along the way:
- Some backgrounds are images. The larger the page, the larger the background. Large background images need to be measured and taken into consideration on overall download time.
The American, Baseball, Blue Sands, Cats, Democrat, Eyeballs, Football, Green Paper, Marble, New Wave, Ocean,
Paisley, Republican, Ringbinder, Rivets, South Beach, Space, Stone, Tan, and Water, PageBuilder page styles all use images as backgrounds.
Source: View Source of PageBuilder.
- Consider using text-based navigation. Buttons are images. Images take longer to download than text. Instead of using an image of a mailbox like this:
<a href="mailto:SecretAdmirer@webtv.net"><img src="URLofimage"></a>
Consider using text:
<a href="mailto:SecretAdmirer@webtv.net">E-Mail Me</a>
- Break large tables into smaller tables. The images will not appear until the entire set of images in a a table are ready to be displayed. Instead of having 12 images in a table, consider using 3 tables with 4 images each.
- Consider reusing images. Once an image has been downloaded into memory, it will appear quickly.
[Authors note: All of the above methods were tested on actual photos of Uncle Bob. No Uncle Bob photos were hurt during the research of this article.]
with love from,
Beth Candy
My SiteMap of Help Pages
|
