Placing a Photo on your web page
Paint Shop Pro 6

When you scan a photo always go for a larger image dimension that what you will use as your finished size for you web site. You can reduce the height and width of a photo without a lot of quality loss however it is very difficult to increase the size of a photo and have a decent picture.

Remember to copy your original photo and use the copy to work with. If there are any problems and you ruin the photo you will still have a clean copy of the original to fall back on without having to rescan.

Example HTML Code

HTML text

The code to the left is the actual HTML code you should have on your web page for graphics. Below we will break down what each property.

Image Properties Dialog Box
The example to the left is just to give you an idea of the information needed to correctly place a photo on your web site.

Image File: name is the exact location where the photo is found on your server. If your photo is not appearing when you look at your web site make sure the spelling is correct. Also make sure that the name used for the Image File and the actual jpg are the same.

Alternative Text: Some people browse the Internet with their graphic turned off. By placing descriptive text in this area the person viewing your page will know what the picture represents.

Alignment:Not always necessary to use unless you want to specify that the photo should sit in relationship to other photos or text on your page.

Width - Height: The exact measurements of your photo in pixels ... if you don't know what the measurement is you can view that in your graphic program. You can not make a photo smaller by placing decreased values in this code. Some browsers will show the photo smaller but it will still have to download the full size of the larger photo.

Border: Make sure you set this to "0" especially if the photo or graphic is used as a link to another page. When used as a link the figure will be outlined with another color when you place your mouse over the figure. This happens because the object is seen by the browser as only a link.

Graphic Design

Paint Shop Pro Tutorials ~~ Tubes ~~ Photo Effects using Java Applets
More Special Effects with Photos ~ ~Sandy's Grapic Art Gallery, Including Tutorial Links
PSP Graphic Sites Links ~~ Web Rings ~~ Sign Guest Book ~~ Read Guest Book
Cartooning with Vector Graphics ~~ E-mail ~~ Graphic Home

PNW Web Design & Graphics Home

Copyright © 1995-2002, by Sandy Stillwell
Web Design & Graphics by
PNW Web Design