Adding Images to your page
The Process
Image types
Image size
- .GIF
This is a compressed file format best used for compressing graphics with large areas of solid color such as: logos, cartoons, navigation bars, line art without lots of shading. GIFs have the ability to be made transparent, and to be animated.
- .JPG or .JPEG
This is a compressed file format best used for compressing graphics with colors that fade or blur, and for photos. JPEGs cannot be made transparent nor can they be animated.
- .ART
An AOL proprietary format, not readable by people without AOL's browser. Please note: AOL users using AOL's browser and proxy server will have all images converted into .ART for them regardless of what file type that image orignally had.
Getting an image onto your floppyThe larger an image file size, the longer that image will take to load when you go to the web page
You can reduce the file size of an image by making the image itself smaller using a graphics editing program such as PhotoShop. You can also reduce an image's resolution, measured in pixels per inch (PPI).
- An optimal image resolution for the web is 72ppi.
- An optimal image (file) size is 30K or less. The smaller the image, the faster your page will be to load.
Note: The lab has a faster connection to the Internet than you probably do at home so images will load faster there.
View your image locallyGet an image for use on a web page in one of the following ways
:
- Use a digital camera to take a picture in JPG format.
- Go to one of the free graphics download sites listed below, click on an image (right mouse click if on a PC, click and hold down on a Mac), and download it to your floppy or zip (there might be a Save Image As choice): Leave the image as a .gif or .jpg, but feel free to re-name the image to a shorter name (you'll need to know its name to put it into your page).
- Use a scanner to scan in a photo and then use an image editing program such as photoshop to make the photo the size you want it and save it in a good size/resolution/format for the web. Usually photos will be in the JPG format.
Placing an image on a web pageJust like with web pages, you can use your Netscape or Internet Explorer to view your image locally. Go to the File menu and choose Open and navigate to where your image is on your floppy.
Decide what to do with your imageTo place an image on a web page you first must publish that image on the WWW somewhere. So the first step once you have that image on your floppy is to use FTP to publish that image in your web publishing space. Please note, images must be published using binary mode in WS_FTP and as raw data in Fetch.
Choose your name for your image carefully. Use all lower case to name images, and no spaces in file names. File names are case sensitive and may not contain spaces.
After you have transferred your image using WS_FTP or Fetch, try going to your URL for that image directly. If you have the web space wpd1, and you published an image called deana.jpg, the URL for that image would be:
Images may be used as follows:
- An image that displays in a specific place on a web page
- An image that is used as a background to a web page and "tiles" to fill the whole web page. Please note: using an image as a background means that you cannot then use a background color.
To use a background image
To use a background image, that information goes in the BODY tag for your whole web page. A web page may only have one body tag.
<BODY BACKGROUND="deana.jpg">
Using a photo as a baground can make it VERY hard to read the text on the page (see above example).
To place an image on a web page
<IMG SRC="deana.jpg" ALT="A picture of Deana in a pink shirt" TITLE="Deana Meyer" ALIGN="RIGHT" >
Note: in quotes after the attribute SRC is the full path to the image. If your image is the same folder/directory as the web page that is referencing it, then you can just use the image's file name.
Read:
Read some of the articles about graphics at: http://webdesign.about.com/compute/webdesign/msubgraphicstips.htm