Adding images to your web pages require several steps:
- find or make the image
- decide if you will store a copy of the image in your own web space
or simply link to someone else's image
- insert the image's location information in your web page
- align the image in your web page (left aligned, right aligned,
in a row of text, in a table, with a border, etc.)
- decide if you will make the image a link to another web page
Images on the web, images in commercial collections, images scanned from printed sources, images created with paint or drawing programs, images captured with digital cameras: images are everywhere!
Capturing images using digital cameras or scanners is fairly easy to do and well worth the effort. Check with Media Services in Bailey/Howe for access to scanners and digital capture equipment. In this section of the tutorial we'll focus on finding and using existing images on the web
Two search sites that are especially useful for finding images are Google (http://www.google.com ) and Ixquick (http://www.ixquick.com/ Each of them provides a selection to search for images. Choose the image search, then type the name of the image subject in the box. For example, if you are looking for roses, you could simply type rose. The search engine will return a number of images that use the name "rose" in the image name. They may be pictures of actual roses). or a picture of Pete Rose! Find the image you would like to use, and click on it. Continue to click on it until the picture is the only thing on the web page and the URL in the address/location box ends in .jpg, .gif, or .png. That way you will know that you are looking at the actual image at its real size. For example, here's an image of roses from Google's search results. Note the URL ends in .jpg which tells me I am looking directly at the image file:
Once you have found an image you must make a decision about how to include
it in your web page. Read on!
Images that appear on a web page are actually separate files that are stored on the server. This server can be your server, either in your space on the server or in some other space, or it can be someone's else's server altogether. When you add an image to your web page, you are actually not adding the image itself but a reference to that image's address as well as information about how that image should be displayed (size, location, alignment, etc.)
To use an image in your web page you must either save a copy of the image in your web space or create a link to an image that resides in someone else's web space. How do you decide which to do? The answer is determined by what is practical and what is legal. Look around at the site where you have found the image. Does the owner state that the image is copyright and so should not be copied? Or does the owner, as in the case of many large image collections, ask that you DO copy the image instead of linking to it?
When you link to an image you are making work for the server that houses that image. Every time someone visits your page, the server that houses the image must provide the image that you have included in your page. For sites that provide large image collections, this constant accessing of their server would prove burdensome, so these sites ask that you make a copy instead. If, however, the image is already on your own server but in another account, copying the image may be making an unnecessary duplication. For example, if you would like to use some of the standard bullets or buttons found at http://www.uvm.edu/icons/ you should link to them. They are stored on zoo, your page is stored on zoo: making an additional copy in your own folder is just a waste of space! On the other hand, if the image you are including in your web page is located on another server, and the owner of that image decides to remove it or move it, your web page will no longer know how to find it and so it will appear broken on your page.
Copying an image will guarantee that you maintain control of the image, but may be illegal. All web pages and images are copyright by their creator whether they state so explicitly or not. People or groups who do not wish for you to make copies of their materials will usually state that. You should always check the site for information about using the image. For more information about copyright in the web world, check the library's web links on copyright.
Link to someone else's image:
To link to someone else's image, point to the image with your mouse and click the right mouse button. A pop-up menu will appear. Choose "Save this image location." The image's web address will be copied into your computer's memory.
Now, in Composer, open the web page in which you want the image to appear.
Position your cursor where you want the image and choose Insert: Image from
the menu, or click the Image icon on the toolbar. Paste in the image address
that you just saved by clicking in the box and pressing Ctrl-v, or by right
clicking in the box and choosing Paste from the pop-up menu.
Save a copy of the image in your own web space and use that one:
To save a copy of an image, point to the image with your mouse and click the right mouse button. A pop-up menu will appear. Choose "Save this image" and save it to your disk in the usual fashion. Now you will need to FTP the file from your computer to your web space on Zoo. See http://www.uvm.edu/~hag/wcreate/wcwsftp.html for instructions on how to do this. Don't forget to set the permissions on the image file!
Now, in Composer, open the web page in which you want the image to appear. Position your cursor where you want the image and choose Insert: Image from the menu, or click the Image icon on the toolbar. Type in the address of the image you just saved and moved to Zoo. It should be in http://www.uvm.edu/~ your-account-name/filename.jpg or filename.gif or in a sub-folder. For example, the image above is in my wcreate sub-folder and it is named roses.jpg, so the address would be http://www.uvm.edu/~hag/wcreate/roses.jpg.
Better yet, go to your browser and type in the address for the image. If the image comes up you will know that it is there and the permissions are set correctly. Now copy the image's URL (select and Ctrl-c), go back to Composer, and Paste the URL into the image dialog box.
Warning! Warning! Warning! When you open the Image dialog box you may be tempted to click on the "Choose File" button and select your file from the place where you saved it on your computer. Don't give in to temptation! If you use Choose File you are telling Composer to use the image file that is on your computer, not in your Zoo space. When someone tries to view your page from another computer, the image will appear broken to them because their computer cannot "see" your computer. You must provide the address of the image where it is stored on zoo. How do you know you've got the right one? The address will begin with http://www.uvm.edu, not file:///C/...
Image alignment is set to top. Only one line of text will appear next
to the image. Subsequent lines of text will wrap around after the image,
as you can see by this example (depending on how wide your window is set).
These options are usually used when you have a small image that you want
to appear inline with the text.
Here is an example of image alignment set to middle or center.
Image alignment is set to bottom.
Choosing to left or right align an image will result in multiple lines
of text being wrapped around the image, as in the following examples:
This image is aligned to the left with the text set to wrap to the right.
As you can see, multiple lines of text are wrapping around this image. This
option is called "left align" in older versions of Composer because it referred
to how the picture would be aligned. Newer versions of Composer now call
it "Wrap to the right" referring to which side the text will wrap.
This image is aligned to the right, or, as newer versions of Composer call
it, text "wrapped to the left." The image is situated on the far right side
of the window no matter how wide the window is set. Want to see how the image
alignment reacts to different situations? Try making this browser window larger
or smaller.
If you need to align the picture in a more specific way you will need
to crete a table and insert the picture in the table. Remember that not everyone
will ahve the asme browser, same computer, and same display as you. Because
of this you can never be sure how wide any given browser window will be.
A picture carefull aligned one inch from the right border on your screen
may end up displaying three inches fromthe right or even on the next line
down on someone else's screen. Experiment by re-sizing your browser window
when you view your web page to get an idea of the many ways your page may
look.
Many people browse the web with text-only browsers or with browsers that translate text to speech. Often the browser will display the word "image" and no other information where you have placed your image. To provide some information for these browsers, use the Alternative Text or ALT feature in the image tag. For example, to let someone know that your image is a logo you could include the phrase "Image of our Old Mill Tower logo."
Image Size
Computer images are composed of dots and measured as number of dots in
width and height. For example, the little images of stars above are 64x64,
or 64 pixels wide by 64 pixels high. While it cannot actually alter the size
of the image, Composer can make it appear larger or smaller on your web page.
For example, here is that same image, constrained by Composer to be 20x20
and here it is expanded to be 200x200. The actual image size has not changed.
the real image is still 64x64 and has a file size of about 3 Kilobytes.
Even though Composer has shrunk the apparent size of the image, it is still the same filesize and so will take just as long to load. It is for this reason that it is important to pay attention to your image's real filesize. Just because you can take a 5 or 6 Megabyte image and have Composer display it as a small image doesn't mean the people visiting your page will want to wait ten minutes for the page to load!
Conversely, if you take a small image like the one above and have Composer
expand its apparent size, it will do so, but in spreading the limited number
of pixels over a larger area will probably begin to display some distortions.
As you can see, the expanded image of stars is fuzzy and "pixelated."
Want to link a small image to a larger image? Or an image to another web page that contains text? Or a phrase of text to an image page? All variations are possible on the web.
Insert your image as described above. To create the link, right click on the picture you have just inserted and, depending on your version of Composer, choose "Image Properties" then click the "Link" tab, or choose "Create Link." In the dialog box, type or paste in the full address, including http://, of the page you wish to link to.
You may also use the Image Properties dialog box to choose whether or
not your image should have a border, and how wide it should be, as well as
how much space should appear between the border and the image itself.
Copyright by