Image Basics

Be it pen on paper or pixels on a screen the six main factors of images remain the same. The six main factors are: format, color, size/resalution, speed, transparency, and animation.

Format- The Graphics you use in your Web Page should be in format that each of these o.s.'s can recognize. Presently, the two most widely used formats on the web are GIF(Pronounced "Jiff" like the peanut butter) and JPEG with PNG gaining popularity.

Color- The color you chose was more of an issue in yesteryear when 8-bt monitors where used so the colors had to be more "rustic" but now with 80% view the web through 32 bit monitors so you can use Red, Blue or green and anything in between.

Size/Resalution- For perspective digital images are measured in pixels. A megapixel digital camera can take pictures that are 1600 pixels wide and 1200 high and the average web pages are usually around 640 pixels wide and 480 high.

Speed- I.e. how long it takes to load on the screen. Things one can do to speed up loading: Limit colors used in image, compression, eliminating details etc.

Transparency- Can create complex layouts and give images non rectangular outline: Both GIF and PNG allow transparency, JPEG does not.

Animation- Can be saved with GIF but not JPEG or PNG.

Look here if you want to know how to...

Table of Contents
Inserting an Image on a page
Offering alternate text
Scaling an Image
Making an Image float
Stop Images from wrapping
Adding space around an Image

---

---

Do NOT scroll your mouse over these images to the right.

Inserting an Image in a Page

Place cursor where you wan image to appear

Type img src="image.url" where image.url indicates the location of the image file on the server.

Offering alternative text

1. Within the image tag, after the src attribute and value,alt=".
2. Type the text that should appear if, for some reason, the image itself does not.
3. Type ".
   
   
   

Inserting an Image in a Page

1. Place the cursor where you want the image to appear.
2. Type (<)img src="image.url" where image.urlindicates the location of the image file on the server.
3. Type a space and then the final /(>).

Scaling an Image

1. Type (<)img src="image.url",where image.url is the location of the image on the server
2. Type width="x" height="y" where x and y are the desired width and height, respectively, in pixels, of your image.
3. Add any other image attributes as desired and then type the final /(>)

Making an Image Float

1. Type (<)img src="image.jpg" where image.jpg indcates location of the image on the server
2. Either type align=lefy to float the image on the left of the screen while the text flows to the right, or type align=right to flot the image on the right edge of the screen while the text flows on the left side of the image.
3. Add other image attributes,as described in other parts of this chapter, if desired
4. Type the final />
5. Create the elements that should flow next to the image.

Stop Image From Wrapping

1. Create your image and the text or other elements
2. Place the cursor where you want to stop wrapping text and elements to the side of the image
3. • Either type (<)br clear="left"/(>) to stop flowing content until there are no more floating objects aligned to the left margin
   • Or type (<)br clear="right"/(>) to stop flowing content until there are no more floating objects aligned to the right margin
   • Or type (<)br clear="all"/(>) to stop flowing content until there are no more floating objects on either margin

Adding Space Around an Image

1. Type (<)img src="image.jpg" where image.jpg indcates location of the image on the server
2. If desired, type hspace="x" where x is the number of pixels of space to add on both the right and the left sides of the image
3. if desired, type vspace="x" where x is the number of pixels of space to add on both the top and bottom of the image
4. Add other image attributes as desired and type the final?(>)