Repeating Images

Do you have the same images on separate pages? Are they larger images that take a while to download - like a header? Do you want to decrease the overall size of your site by using a little trick so you only upload one of those images instead of several of the same one? If you answered "yes" to each of these questions, then this page is for you!

Following are instructions for placing repeated images on your pages but only one image gets uploaded. By using this procedure you could possibly reduce the overall size of your site (depending on your images) by many thousand bytes! Full instructions are explained below - just follow along closely and you'll have a more streamlined site. As an added bonus, since the images that are displayed using this method are called from the same location, every time the same image is called for again it will show up much more rapidly when the next page is brought up.

If you will be using an image from the Web Studio galleries, open a new site, drop the image, then preview. In preview, right-click on the image, click "Save picture as" then save it to your drive with a (short) name that you will recognize for it. Do this for each image you will be using from the galleries.

Here is the procedure - follow the HTML Object instructions for each image you will be repeating. Place all of your repeated images on the same page, as instructed below.

To create repeating images

  1. Add a page to your list and name it "images". It doesn't matter what the name really is because nobody will view the page directly. The instructions here use that name, so be sure to name it "images".
  2. Drag an HTML Object on the page from the "Cool Stuff" gallery.
  3. Right-click on the Object, click Properties, then the "Attached Files" tab.
  4. Click "Add Files To List", browse your folders for the image and double-click on it. Your image should show in the attached files list now.
  5. Click on the "Place Holder Graphic" tab. Click on the "Load New Place Holder Graphic" button, browse to the same image and double-click. On the General tab, note the width and height of the image. That will be used in the next step.
  6. Click on the "HTML Content" tab. Click in the window and enter the following code (for a non-linked image) -

    <img src="images/imagename.gif" width="###" height="###" alt="your message">

    NOTE    : Change "imagename.gif" to the name of your image as shown in the attached list. Use just the last part, not the "C:\..." and other stuff. Only use the name and extension. If the image name includes spaces, replace the spaces with underscores ("_"). Also, replace the "###" references with the actual width and height you noted after inserting the "Place Holder Graphic" (#5 above). Change "your message" with the message you want displayed when the visitor holds their cursor over the image.

  7. If the image (on all pages) will be linked to another page in your site, use the following code example -

    <a href="yourlink.html">
    <img src="images/imagename.gif" width="###" height="###"
    alt="your message"></a>

    NOTE    : Change "yourlink.html" to the link you require. Using "html" will not work in preview - for preview purposes use "htm". However, because of the nature of this procedure it is advisable to leave your link as "html" and preview directly in IE (for that procedure, see "Previewing Directly in your Browser".)

  8. Once the required code is in place click "OK". You should see a representation of your image on the page.
  9. Repeat the above procedure on the "images" page for all repeating images.

To place repeating images on your pages

  1. Go to the "images" page, right-click on the required image and click "Copy".
  2. Go to the page(s) it is to be placed on, right-click on the page and click "Paste".
  3. Right-click on the pasted image, click Properties then the "Attached Files" tab.
  4. Click on the image in the list (should just be the one) then click "Delete Files From List". You'll get a message "Do you really want ..." - click "Yes". That removes the image from the attached files of that Object. Click "OK", then drag the image wherever you need it on the page.

Although it appears the image is on that page it is not really - what you see there is only a representation of the image. The real image is still on the "images" page. When you copy from the "images" page and paste on your other pages, just remember to go in and delete the image from the attaced files list. All that will be uploaded is that one image on the "images" page. All of the pages you pasted it to will grab that one image from the images page and show it on the other pages.

If any problems, post a message on my message board. Once you get the hang of it I believe you'll appreciate the benefits of this procedure. Try it out on a multiple-page test site.

And now, have fun!

~ swipesy ~