Objectives: Index | Definitions| Previous | Next |
Adding Images
- Save an image from another web page.
- Put an image (photo, graph, etc.) on your web page.
- Place text and image where you want them.
Saving an image:
If you already know how to save an image, do so in your practice folder.
If you don't know how to copy and save an image, try these two methods: A. The Secret Menu;
Go to http://pdg.lbl.gov/~aerzber/aps_humor.html. You will copy and save the cartoon.Look for the "secret" popup menu in your web browser:
- Click and hold the mouse on the image above to bring up the "secret" menu.
(Click and hold the mouse for Macintosh; click and hold the right mouse button for W\ indows and Unix.)
- Select "Save this Image as..."
- When prompted, enter "physics_phun.gif" as the name for the file (it may insert it for you).
- Save the file in the same folder/directory as your HTML document.
B. Saving As Source:
If you cannot find the secret menu, try this approach.
- Select the link below ("view the image") that links directly to the image. It will likely show the picture by itself in a separate web page or it may launch an external graphics program to display the image. View the image.
- If the image displays by itself in a web page then:
- Select "Save As..." from the File menu.
- Select the option to save as SOURCE.
- Enter "physics_phun.gif" as the name for the file.
- Save the file in the same folder/directory as your HTML document.
- If the image displays in an external graphics program, then:
- Select Save As... from the File menu.
- Look for an option to save as GIF format.
- Enter "physics_phun.gif" as the name for the file.
- Save the file in the same folder/directory as your HTML document.
GIF or JPEG:
The way a web browser displays graphics in HTML format indicates the location of a graphic file and is in a format that can be interpreted by different types of computers.GIF
The standard format that can display within a web page is GIF or Graphics Interchange Format. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color or lines. GIF images have the feature of defining a color to be "transparent" so images can appear to have non-rectangular boundaries. They can also be saved in the "interlaced" format so that when you see a web page, the images start to appear soon and "dissolve" to the final image. Write image name as "image.gif".JPEG
The other file format used on the web is JPEG (named after the Joint Photographic Expert Group that designed this format). JPEG compression is very effective for photographic images ("grainy" images). JPEG offers some dramatic compression in filesize, sometimes by a factor of 10 (e.g. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality. JPEG images do not have transparency. Write image name as "image.jpg".WARNINGS:
- Give credit for source of image, either near the image on the web page or in the alt tag. (See "alt" tags later in this lesson.)
- Large and numerous images may look great on a high-end computer, but they will frustrate users who must wait for images to be sent over the network. As a suggestion, keep the total file size of all images on a web less than 100k (or even less than 50k each).
- Not all of us have a 21-inch computer monitor! Keep graphic images no wider than 480 pixels and no higher than 300 pixels to avoid forcing users to scroll or resize their web browser window.
- Color gradients may look pretty but for GIF images they do not compress as much as solid color areas and they can sometimes come out "banded".
- Some graphics programs offer options for "no dithering" when converting to GIF -- this can reduce the amount of "noise" in a solid background.
- Many dark grey tones on Macintosh computers are not discernible on Windows computers.
- Rather than displaying all of the images on the web page, have them linked as external images that are downloaded only when a viewer clicks on a link. If you have numerous pictures to display, try to break the web page into a series of linked pages. See examples at http://pdg.lbl.gov/~aerzber/family_12.01.html.
- A single image (e.g. a small "bullet") can appear several times in a web page with little added delay each time you use that same image.
- Many web browsers "cache" images (storing them on your computer) meaning that using the same file in several web pages will load them from the viewer's computer rather than loading them across the Internet.
- Most importantly, make sure that the images are ones that add meaning to your HTML documents.
INSERTING IMAGES:
- In your web page, after the text, place:
<IMG SRC="physics_phun.gif">
- To place first line of text in various places relative to the image try these:
<img src="physics_phun.gif" align=top> To place an image on its own line, put <P> before and after it.
<img src="physics_phun.gif" align=middle>
<img src="physics_phun.gif" align=bottom>
- Use the alt tag for non-sighted viewers and to save time for slow connections:
<IMG SRC="physics_phun.gif alt=physics cartoon> The text will show while the image is loading or if images are turned off.- It saves time to tell the dimensions that need to be saved for the image as the page is loaded. Use a graphics program, or drag the image onto your browser and it'll tell the dimensions. The cartoon should be
<IMG SRC="physics_phyn.gif alt=physics cartoon HEIGHT=427 WIDTH=360> You may run into trouble if you try to force the image to be a different size than it is.PRACTICE:
Surf the web and browse for pictures. Try to download at least one image that might be useful for your page. Just a few places you might try:
- ClipArt Connection
- CoolText Online Graphics Generator
- Ditto.com
- Yahoo's Clip Art
- Lycos' Picture Search
- Yahoo's ImageSurf
- The Free Site
- Free Graphics Store
- Barry's Clip Art Server
CHECK YOURSELF:
- A GIF is used for what type of image?
- A JPEG is used for what type of image?
- What should be included in the image tag?
Project Contact: Andria Erzberger
Last Update: January 21, 2003
