When you add images to your web page, the image file must be accessible to the browser. This means that locally the image file must be in the same folder as your HTML document; if you move the HTML document that links to an image to a different location you must also move the image file(s) to the same location, including uploading files to your SWS folder.
Assume the following:
You are working in the CIS121\Lab4 folder on your disk (Zip
disk, floppy disk, or hard disk on your home computer). Your HTML
document is personal.html, and you have added 2 images as
follows:
<img src="myphoto.jpg" width="200" height="300"
alt="My photograph" />
<img src="neat_pic.jpg" width="450" height="325"
alt="Interesting picture downloaded from The Internet" />
myphoto.jpg and neat_pic.jpg must also be in the CIS121\Lab4 folder. When you upload personal.html to your SWS directory you must also upload myphoto.jpg and neat_pic.jpg . When you are finished with your upload you need to check your page to ensure your images load. If your images do not load from the Web Server be sure the file name specified in the <img> element matches exactly the name of the file you uploaded, including upper and lower case. I cannot emphasize strongly enough the importance of a consistent naming convention.
Consult an HTML guide for additional information about the <img> element and its attributes. Note in particular the width, height, and alt attributes, as well as the effects of the various align attributes. Also note that there is no img ending tag; the entire image element is contained within the <img... /> tag.
[ TOP ]
The two most common graphic file formats are GIF (Graphic Interchange Format), pronounced "jiff") and JPEG (JPEG File Interchange Format), pronounced "jay-peg." JPEG: Joint Photographic Experts Group. Another increasingly popular format is PNG (Portable Network Graphics format) which is similar to GIF but not encumbered with patent restrictions. JPEG is usually best for high resolution graphics such as photographs; GIF is best for images that have fewer colors and large areas of the same color or pattern, such as line drawings and computer screen image illustrations.
All these formats implement a compression algorithm. GIF and PNG are "lossless" compression (no information is lost) where JPEG is "lossy" (some information will be lost). Graphic editing programs provide an option for controlling the compression ratio for JPEG files, commonly called "save quality" or just "quality" because as you increase the compression ratio more information will be lost.
There are numerous application programs for editing graphic images (MS Photo Editor, Adobe Photo Shop, etc.). I will be using the graphic viewer utility IrfanView http://www.irfanview.com/, a free 32-bit graphic file viewer for Win9x, WinNT, and Win2000. While it is listed as a "viewer", it has all the editing capabilities needed for CIS 120 & 121. It is a "stand-alone" program (i.e. it does not need to be installed and linked to your Registry), and it fits on floppy disk.
JPEG compression ratio is controlled from IrfanView's File > Save As menu, Options button:
|
|
|
| Controlling compression ratio via "Save Quality" with IrfanView | |
You can edit numerous image properties from IrfanView's Image menu. Shown here is the Image > Resize/Resample menu where you can resize an image. IrfanView give you one "undo," therefore it is essential that you have a "master" copy backed up somewhere. I usually use "Set new size as percentage of original." 75% - 80% seems to work good for screen shots like the ones on this page; many photographs can be reduced a lot more.
|
|
| Resizing an image with IrfanView | |
Examples:
If you scan an image you should use the highest resolution possible. This will take longer, but give you a "master digital image" to work from. Save a backup copy of this original high resolution image file. Unless it was a very small image this will most likely be too big a file for your web page. In a graphic image editing tool you can then use the "Crop," "Resize/Resample," and Save Quality/Compression Ratio tools to get your image reduced to a size suitable for your web page. Make all your edits to a copy of the original "master" in one editing session; try to avoid going back and editing a version that has already been reduced.
Lets say you reduce the size of an image and save it to a lower resolution, which is good for web pages. The worst thing to do after this is use that copy for future edits, especially try to make it bigger. Some of the original resolution has been lost due to compression, and you are essentially trying to extrapolate from a data set of diminished precision. If you don't like the version you edited, you should go back and load the original and start again, always making your edits from the highest possible resolution.
Example:
Image 1Cropped from original, saved with "80% Save Quality" |
Image 2Image 1 reduced by 75%, "80% Save Quality" |
Image 3Image 2 increased by 150%, "80% Save Quality" |
Instructor's note: The framed poster about goats in the background is purely coincidental, although my wife seems to think it is appropriate . . .